JavaScript控制css的样式

最新推荐文章于 2023-10-05 19:57:11 发布

原创最新推荐文章于 2023-10-05 19:57:11 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了如何利用JavaScript来动态改变和控制HTML元素的CSS样式，实现网页交互效果的增强。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript控制css的样式

属性使用id,在script中使用方法getElementById
这是通过js控制css样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
//            alert('弹出');

//            alert(document.getElementsByClassName('my_box'))
            document.getElementById('my_box').style.height='300px';
            document.getElementById('my_box').style.width='600px';
            document.getElementById('my_box').style.backgroundColor='pink';
//            不写var则是全局变量
            var boxname = document.getElementById('in_box');
            boxname.style.width='100px';
            boxname.style.height='100px';
            boxname.style.backgroundColor='red';
        }
    </script>

</head>
<body>
<div id="my_box">
    <div id="in_box">
    </div>
</div>
</body>
</html>

这是通过js来控制内容：

<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>

<style type="text/css">
.first
{
color: black;
}
.second
{
color: red;
}
</style>
<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>
<h1 class="first" id="changeme">Changeable text</h1>
<a href="javascript:;" onClick="change('changeme', 'second');">RED</a> | <a href="javascript:;" onClick="change('changeme', 'first');">BLACK</a>

2. 修改CSS的属性（来自http://www.shawnolson.net/）

脚本：

function changecss(theClass,element,value) {
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}

例子：

<span class="exampleA">Example A</span>
<span class="exampleB">Example B</span>
<span class="exampleA">Example A</span>
<input type="button" value="Change A Red" onclick="changecss('.exampleA','color','red')"/><input type="button" value="Change A Black" onclick="changecss('.exampleA','color','black')"/>