代码之家 › 专栏 › 技术社区 › tic

通过javascript更改CSS属性

stylesheet css javascript

tic · 技术社区 · 16 年前

我需要一个函数来“即时”更改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 回复 | 直到 10 年前

Kenny Evitt 10 年前

样式表可以在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's background color is modified via JavaScript.
</body>
</html>

示例由Mozilla贡献者提供,复制自:

Using dynamic styling information - Web API Interfaces | MDN

dade 15 年前

通过设置样式对象的属性,您可以轻松地访问和修改任何DOM的CSS属性。也就是说,要更改ID为yourid的dom元素的背景色,可以执行此操作。

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

请注意,由两个名称组成的CSS属性由一个连字符分隔,即背景色、字体大小,将转换为camelcase符号,即背景色和字体大小,而单字属性保留各自的名称。

Jacob Relkin 16 年前

你可以使用 id 属性,但它们必须是唯一的。您也可以使用 class 属性,但要找到所需的特定元素会有点困难。

然后,使用javascript,您可以使用 document.getElementById 函数来检索要设置CSS属性的domElement对象。对于类,您需要首先通过调用 document.getElementsByTagName ,然后迭代生成的数组,检查每个元素是否具有提供的类名,如果有,则添加到数组中,循环返回后再添加。

gmunkhbaatarmn 12 年前

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

N 1.1 16 年前

如果要使用复杂的选择器 th[scope=col] 使用 jQuery

Patt Mehta 13 年前

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