通过JavaScript更改CSS属性

Question

通过JavaScript更改CSS属性

14

我需要一个函数来实现在我的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]）的外观。

我该怎么做？谢谢！

- tic

感谢大家的回复。我投了所有人的票，因为每个回答都教会了我一些以前不知道的东西。我选择了对我的问题来说最简单易懂的回答。 - tic

6个回答

10

通过设置style对象的属性，您可以轻松访问和修改任何DOM的CSS属性。例如，要更改具有id #yourid的DOM元素的背景颜色，可以执行以下操作：

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

请注意，由连字符分隔的两个单词组成的CSS属性，例如background-color和font-size，会被转换为驼峰式命名，即backgroundColor和fontSize，而单个单词的属性则保留其原始名称。

- dade

1

直接修改CSS属性会很有用，这样它们就可以应用于动态添加的元素。 - Kenny Evitt

6

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

- gmunkhbaatarmn

1

那个语法不对，标准的方式是使用驼峰命名法，例如 myObj[i].style.backgroundColor。但是点号后面跟着方括号不是有效的 JavaScript 语法。 - Ry-

5

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

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

- Jacob Relkin

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>

- Patt Mehta

1

如果您想使用像 th[scope=col] 这样的复杂选择器，请使用 jQuery。

- N 1.1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kennytm · Accepted Answer

可以直接使用JavaScript中的 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贡献者提供并从以下链接复制：

使用动态样式信息 - Web API接口| MDN