用JS改变html样式

用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代表样式规则的集合。这种方式更方便

用JS改变html样式相关推荐

js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js如何修改html样式,怎么用js改变css样式？
怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
js改变css样式_React 中使用CSS的7种方法
来源 | https://www.jianshu.com/p/74aa74484579 第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import Reac ...
改变div php,js改变div样式
摘要:html> changeDIV #box{width:&nbsphtml> changeDIV #box{width: 100px;height: 100px;backgro ...
JS 改变HTML样式
语法 Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元 ...

用JS改变html样式

用JS改变HTML样式

用JS改变html样式相关推荐

最新文章

热门文章