JS 动态修改CSS 样式方法全局

html-css026

JS 动态修改CSS 样式方法全局,第1张

如何配置自行百度

1.scss文件定义变量

2.js中更改$textColor 变量的值

都是获取DOM

通过DOM分别修改当前DOM样式属性值、

当前DOM整体css样式、

修改当前DOM的className类名、

将link引入的标签作为DOM 修改link的href,从而修改引用的样式表。

详情转自: https://blog.csdn.net/wx13227855087/article/details/81391787

引用是用link标签进入的CSS文件。所以可以直接修改link的href就可以修改CSS的链接路径了。下面是个小例子:

<link href="../base.css" type="text/css" rel="stylesheet" id="link1" />

<title>无标题文档</title>

</head>

<body>

<div style="width:100px height:100px border:1px solid #ccc"></div>

</body>

<script>

var oLink = document.getElementById('link1')

oLink.href = '../../aaa.css'   //这样就把link的链接修改为'../../aaa.css'了。

</script>

</html>

1、首先打开我们测试的编辑工具 我这里使用的是Eclipse。

2、首先我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件。

3、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码。

4、接下来我们就使用js修改高度。

5、这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度。

6、使用js修改CSS文件中的div的height的值 HTML文件中的代码。

7、样式表css文件中的代码如图所示  运行项目之后 你会看到两个div的高度是一样的。

8、然后我们是在js文件中获取div1的id属性 然后使用obj.style.cssTest来修改嵌入式的css。

9、然后运行项目之后 两次结果都是一样的 div的高度改变了  。