正文
js切换css样式,js设置css样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js怎么修改css样式
js:
el.style.display = 'value' // el 为DOM元素，display为要设置的属性（width，height，等，采用驼峰式命名法），value为想要设置的值
jQ
$('.class').css('name', 'value');
或者
$('.class').css({
name1: value1,
name2: value2,
'backgroud-color': 'red'
})
键值可以使用驼峰式命名法
相关问答
Q1: 笔记：JS设置CSS样式的几种方式
1、直接更改，比如：
xID.style.display = "block"; // 更改display属性，会覆盖css中的定义。
xID.style.display = ""; // 取消js更改display属性，以css样式为准。
这里的xID，是通过id获取的标签。当然，也可能是通过tagName之类的获取的标签。
这种方式，简单直接。但是要修改大量的样式的时候，不适合。所以，我更推荐第二种方式。
2、更改类名
xID.className = "xx yy";
如果有多个类，就用空格隔开。前提，在样式中要有已有类的定义。比如这里的xx和yy类，在css中应该是写好的。
这种方式把所有的样式写在了css文件中，适合更改较多的样式以及炫酷的样式。js就只做一件事情：改类。至于这个类会把标签变成什么样子，交给css吧。
通过jquery也可以达到如上的效果：
$("#xID").css({
fontSize:"12px",
display:"block"
}); // 直接更改样式
$("#xID").addClass("xx"); // 增加删除类
$("#xID").removeClass("xx");
Q2: js如何更改css样式，
JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。
案例
以下小案例使用JQuery作为演示。
前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：
script type="text/javascript" src=""/script
html部分代码
p
我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。
/p
button
点击我，给上面段落添加黄色背景颜色。
/button
JQuery代码
$("button").click(function(){
$("p").css("background-color", "yellow");
});
修改多个属性
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
结论与解释：
首先使用Jquery选择器进行元素选择 - $("button")
为该元素绑定点击事件 - click
click中的匿名函数修改css属性。
在css属性的修改中，p段落有了黄色背景； 多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。
注意事项：
可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。
修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。
Q3: js修改样式css有哪些方法呢？
修改样式
document.getELementById('div').style.fontSize = "20px";
修改写好的类样式
document.getELementById('div').className = "div";
Q4: 如何用JS来改变CSS属性？
通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：
$("img").css('border-color','red');
就可以把边框颜色都变成红色。
这是针对此问题的测试页面
2、这是3张图片
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
3、这是图片的样式，边框默认为灰色。
img{
max-width:200px;
border-color:gray;
border-width:10px;
border-style:solid;
}
4、现在通过这几行用到jQuery的代码，控制图片边框根据鼠标移入移出边框变灰和变红。
$(function(){
$("img").on('mouseover',function(){
$(this).css('border-color','red');
}).on('mouseout',function(){
$(this).css('border-color','gray');
});
});
5、效果如图
Q5: js实现单一html页面两套css切换代码
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个id,例如
复制代码
代码如下:
link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”
我定义的id是css。
第二步：写一个js函数，代码如下：
复制代码
代码如下:
script
type=”text/javascript”
function
change(a){
var
css=document.getElementById(“css”);
if
(a==1)
css.setAttribute(“href”,”1.css”);
if
(a==2)
css.setAttribute(“href”,”2.css”);
}
/script
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码
代码如下:
a
href=”#”
onClick=”change(1)”1.css/a
a
href=”#”
onClick=”change(2)”2.css/a
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
方法二：
第一步：导入两套css文件
复制代码
代码如下:
link
rel="stylesheet"
type="text/css"
title="样式A"
href="css/people1.css"
/
link
rel="alternate
stylesheet"
type="text/css"
title="样式B"
href="css/people2.css"
/
第二步：写切换的js函数
复制代码
代码如下:
script
type="text/javascript"
var
title
=
"样式A";
function
setStyle(){
//只是样式A
和样式B切换
if(title=="样式A"){
title
=
"样式B";
}else{
title
=
"样式A";
}
var
i,links;
//用dom方法获取所有link元素
links
=
document.getElementsByTagName("link");
//判断每个link元素中是否含有style字符串
，用来判断此link元素为样式表link
，同时判断此link是否包含title属性
for(i=0;
links[i];
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled
=
true;
//再来判断title中是否有指定的title字符串
有则把当前的link设为可视
即激活当前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false;
//alert("ok");
}
}
}
}
/script
第三步：在html标签中调用切换的js函数
复制代码
代码如下:
a
href="#"
onclick="setStyle();"
1/a
a
href="#"
onclick="setStyle();"2/a
a
href="#"
onclick="setStyle();"3/a
a
href="#"
onclick="setStyle();"4/a
a
href="#"
onclick="setStyle();"5/a
