Question

我需要一个函数来“动态”更改我的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]等兄弟元素的外观。

我该怎么办？谢谢！

Answer 1

可以使用document.styleSheets list直接在JS中操作样式表。

示例：

<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提供，并复制自：

Using dynamic styling information - Web API Interfaces | MDN

Answer 2

通过设置样式对象的属性，您可以轻松访问和修改任何DOM的CSS属性。即，要改变ID为#yourid的DOM元素的背景颜色，你可以这样做

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

请注意，由连字符分隔的两个名称组成的CSS属性（即background-color，font-size）将转换为camelCase表示法，即backgroundColor和fontSize，而单个措辞属性保留其各自的名称

Answer 3

您可以将id属性用于任意数量的元素，但它们必须是唯一的。您也可以使用class属性，但要找到您想要的特定元素会更加困难。

然后，使用JavaScript，您可以使用document.getElementById函数检索DOMElement对象以设置CSS属性。对于类，您需要首先通过调用document.getElementsByTagName来获取具有指定标记名称的所有元素，然后迭代生成的数组并检查每个元素是否具有提供的类名，如果是，则添加到一个数组，在循环返回后。

Answer 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';
}

Answer 5

如果您想使用th[scope=col]之类的复杂选择器，请使用jQuery

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

通过JavaScript更改CSS属性

6 个答案: