js切换css样式,js设置css样式-成都快上网建站

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'

})

键值可以使用驼峰式命名法

笔记: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");

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属性。

修改单一属性和多个属性的写法是有区别的,多个属性使用{},属性与值之间用:分割,属性与属性之间用,分割。

js修改样式css有哪些方法呢?

修改样式

document.getELementById('div').style.fontSize = "20px";

修改写好的类样式

document.getELementById('div').className = "div";

如何用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、效果如图

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


分享文章:js切换css样式,js设置css样式
网站地址:http://kswjz.com/article/dsejsjc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流