Изменение свойств CSS с помощью JavaScript

мне нужна функция для изменения внешнего вида некоторых элементов на моей HTML-странице "на лету", но я не могу этого сделать.

проблема в том, что я не могу использовать команду

document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');

потому что мне нужно сделать изменения эффективными, когда страница уже загружена, используя ссылку, как

<a onmouseclick="Clicker(1)" href="#">clic</a>

и я не могу использовать команду

document.body.style.background = '#cccccc';

потому что я не знаю, можно ли его применить к другим не таким простым случаям, потому что мне нужно измените внешний вид таких элементов, как td.myclass или родственные элементы, такие как th[scope=col]+th[scope=col]+th[scope=col].

как я могу это сделать? Спасибо!

11
css javascript stylesheet

6 ответов

таблицы стилей можно манипулировать непосредственно в JS с помощью document.styleSheets список.

пример:

<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
 background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>

пример составителей Mozilla и скопирован из:

12

вы можете легко получить доступ и изменить свойства CSS любого DOM, установив свойства объекта style. т. е. для изменения цвета фона элемента DOM с идентификатором #yourid вы делаете это

document.getElementById('yourid').style.backgroundColor = "#f3f3f3";

обратите внимание, что свойства CSS, состоящие из двух имен, разделенных дефисом, i.e цвет фона, размер шрифта превращаются в верблюжью нотацию, i.e backgroundColor и fontSize в то время как свойства с одним адресом сохраняют свои соответствующие имена

8

можно использовать id атрибут для столько элементов, сколько вам нравится, но они должны быть уникальными. Вы также можете использовать class атрибут, но найти конкретный элемент, который вы хотите, будет немного сложнее.

затем, используя JavaScript, вы можете использовать document.getElementById функция для извлечения объекта DOMElement для установки свойств CSS. На занятия, вам нужно будет сначала получить все элементы с указанным именем тега, называя document.getElementsByTagName, затем итерация по результирующему массиву и проверка, имеет ли каждый элемент предоставленное имя класса, и если да, то добавление в массив, который после цикла возвращается.

5
document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';

пример:

document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';


если вы хотите изменить все td.класса MyClass

var myObj = document.getElementsByClassName('myclass');
for(var i=0; i<myObj.length; i++){
  myObj[i].style['background-color'] = '#ccc';
}
5

Если вы хотите использовать сложный селектор, например th[scope=col] используйте jQuery

1
<html>
 <head>
  <style type="text/css">
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     font-family:Segoe UI, sans-serif;
    }
   .header, .container, .footer {
    min-height:100px;
   }
   .header {
    background-color:#757575;
   }
   .container {
       background-color:#cccccc;
   }
   .footer {
    background-color:#757575;   
   }
   .header, .footer, .column {
    text-align:center;
   }
   .column {
    float:left;
    min-width:300px;
    border-left:1px solid blue;
    border-right:1px solid blue;
    margin-left:10px;
   }
  </style>
  <script type="text/javascript">
   function headerContentFooter(headerRatio, footerRatio) {
    totalHeight = document.height;
    headerHeight = 0;
    containerHeight = 0;
    footerHeight = 0;
    if(headerRatio < 0.5 && footerRatio < 0.5) {
     headerHeight = totalHeight * headerRatio;
     footerHeight = totalHeight * footerRatio;
     containerHeight = totalHeight - (headerHeight + footerHeight);
     document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
     document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
     document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
     document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
    }
   }
  </script>
 </head>
 <body>
  <div class="header">HEADER</div>
  <div class="container">
   <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
  </div>
  <div class="footer">FOOTER</div>
  <script type="text/javascript">
   headerContentFooter(0.05, 0.05);
  </script>
 </body>
</html>
1