用JS改变html样式

最新推荐文章于 2024-05-06 17:38:51 发布

zzh1918

最新推荐文章于 2024-05-06 17:38:51 发布

阅读量1.2w

点赞数 2

分类专栏： javascript 文章标签： html javascript css 前端 css3

本文链接：https://blog.csdn.net/qq_37860930/article/details/73189214

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

用JS改变HTML样式

在html中定义样式的方法有3种：

通过link标签链接外部样式
使用style标签定义嵌入式样式
使用标签style属性定义样式

用JS改变的HTML样式无非就是上面三种，改变样式只需要解决两个问题

找到要更改样式的元素
更改样式

更改link链接的外部样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var css=document.getElementsByTagName('link')[0];
        css.href='02.css';
</script>
</body>
</html>

首先获取链接外部css的link 元素节点，然后改变link标签的href的值。

改变style标签定义嵌入式样式
首先获取文档要改变的样式表，然后用操作样式表的方法改变样式表。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .div{
            border: 1px solid #000;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var style=document.styleSheets[0];
    style.insertRule('body{ background:silver}',0);
</script>
</body>
</html>

操作样式表的方法有：

insertRule(rule,index)：向样式表中指定的位置插入rule字符串。index很重要，规则的次序在确定层叠之后应用到文档的规则时至关重要。
delete(index)：删除样式表指定位置的规则。

上面的方法有点麻烦，我们可以通过改变元素的class或id属性来应用不同的css样式。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .one{
            border: 1px solid #000;
            width: 100px;
            height: 100px;
        }
        .two{
            border: 1px solid #000;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="one" id="div"></div>
<script type="text/javascript">
    var div=document.getElementById('div');
    div.className='two';
</script>
</body>
</html>

注意：虽然样式表可以改变对应元素的样式，但它并不是元素的属性，也就是说元素节点的属性列表中不会包含样式表的样式，也就不能通过HTML元素节点属性改变样式表。

改变元素的style属性

首先获取要改变样式的节点，然后可以通过节点的setAttribute(‘style’,’value’)方法来设置style属性，这种方法可以同时设置多条样式规则。
可以直接设置节点的style属性。DOM的HTML元素节点继承Elenment并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都可存在的特性，如id、title、style、className(之所以不是class是因为class是JS的保留字)等。

<script type="text/javascript">
    var div=document.getElementById('div');
    div.style.property='xxx';
    div.style.cssText='string';
</script>

property是要设置的样式名称，后面是样式值。
style.cssText可以同时设置多个样式，string代表样式规则的集合。这种方式更方便

zzh1918

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用JS改变html样式

用JS改变HTML样式在html中定义样式的方法有3种：通过link标签链接外部样式使用style标签定义嵌入式样式使用标签style属性定义样式用JS改变的HTML样式无非就是上面三种，改变样式只需要解决两个问题找到要更改样式的元素更改样式更改link链接的外部样式html>head> title>title> link rel="sty
复制链接

扫一扫