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

html-css024

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

在页面内用JS操作CSS除非用AJAX,但操作页面内的样式的话,是可以的。操作样式分为改变直接样式,改变className和改变cssText三种

一、局部改变样式

调用方法:

改变className

<div

id="demo">测试</div>

<script>

document.getElementById('demo').className="test"

</script>

改变直接样式

<div

id="demo">测试</div>

<script>

document.getElementById('obj').style.backgroundColor="#003366"

</script>

二、全局改变样式

可以通过改变外链样式的的href的值实现网页样式的实时切换

<link

rel

=

"stylesheet"

type="text/css"

id="css"

href="firefox.css"

/>

<span

on

click="javascript:document.getElementById('css').href

=

'ie.css'">点我改变样式</span>

var domain="http://域名/"

var jspath="web/1.8.3/"

var csspath="web/1.0.1/"

var jsfiles=[

    "jquery.min.js",

    "jquery.lazyload.js",

    "jquery.autocomplete.js",

    "common.min.js",

    "home.js",

    "index.min.js"

]

var cssfiles=[

    "01.css",

    "02.css",

    "03.css",

    "04.css",

    "05.css"

]

function addjs(){

    for(var i=0i<jsfiles.lengthi++){

        var s=document.createElement("script")

        s.src=domain+jspath+jsfiles[i]

        document.getElementsByTagName("head")[0].appendChild(s)

    }

}

function addcss(){

    for(var i=0i<cssfiles.lengthi++){

        var s=document.createElement("link")

        s.type="text/css"

        s.rel="stylesheet"

        s.href=domain+csspath+cssfiles[i]

        document.getElementsByTagName("head")[0].appendChild(s)

    }

}

addjs()

addcss()