Изменение свойств CSS с помощью JavaScript - PullRequest
Новая
       17

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

12 голосов
/ 14 марта 2010

Мне нужна функция для изменения внешнего вида некоторых элементов на моей 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].

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

Ответы [ 6 ]

13 голосов
/ 14 марта 2010

Таблицами стилей можно напрямую управлять в 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 Contributors и скопирован с:

8 голосов
/ 23 января 2011

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

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

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

5 голосов
/ 14 марта 2010 
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 голосов
/ 14 марта 2010

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

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

1 голос
/ 12 августа 2012 
<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 голос
/ 14 марта 2010

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

...