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()