Изменение свойств 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].

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

Ответ 1

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

Пример:

<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 background color is modified via JavaScript.
</body>
</html>

Пример от Mozilla Contributors и скопирован из:

Использование информации о динамическом стиле - Интерфейсы Web API | MDN

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 6

<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>