您的位置:

js的切换样式,js更改样式

js的切换样式,js更改样式

更新:

本文目录一览:

JS点击切换s样式

style type="text/css"

#mydiv{

width:400px;

height:300px;

border:2px solid gray;

}

.s{

color:red;

font-size:20px;

}

/style

script type="text/javascript"

function clickMe(){

var div=document.getElementById("mydiv");

var className=div.className;

if(className!=""){

div.className="";

}else{

div.className="s";

}

}

/script

div id="mydiv"

这是一个层

/div

input type="button" value="切换样式" onclick="clickMe()" /

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怎么实现三个按钮点击那个那个更换样式

可以尝试以下操作:

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titlejs控制按钮样式切换/title

link href="css/my.css" rel="stylesheet"

/head

script type="text/javascript"

//左边按钮的点击事件

window.onload = function(){

var arr = document.getElementsByTagName('button');

for(var i = 0;iarr.length;i++){

arr[i].onclick = function(){

//this是当前激活的按钮,在这里可以写对应的操作

if(this.className == 'btn1'){

this.className = 'btn2';

var name = this.id;

var btn = document.getElementsByClassName('btn2');

for(var j=0;jbtn.length;j++){

if(btn[j].id!=name){

btn[j].className = 'btn1';

}

}

}

}

}

}

/script

body

div id="main" style="margin:auto 0"

!--四个按钮--

div style="margin-top:2em;"

div style="width:20%"button id = "1" type = "button" 按钮1/button/div

div style="width:20%"button id = "2" type = "button" 按钮2/button/div

div style="width:20%"button id = "3" type = "button" 按钮3/button/div

div style="width:20%"button id = "4" type ="button" 按钮4/button/div

/div

/div

/body

/html

js更换样式

script type="text/javascript"for(var i=0;idocument.getElementsByTagName('div').length;i++){if(document.getElementsByTagName('div')[i].className=='div1'){document.getElementsByTagName('div')[i].className='div2';}}/script

想用JavaScript实现DIV样式切换

假设有div元素div id="mydiv" class="css1",和两个样式: .css1{} .css2{}

(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")

(2)如果是换了样式之后,想换回原来的样式,即是切换样式,那么就涉及到一个判断当前样式的问题,此时可以使用方法hasClass(),该方法是判断元素当前是否含有某样式。

(3)所以根据1、2可以实现一个点击切换样式的效果,示例代码如下:

script type="text/javascript"

$("#mydiv").click(function () {

if ($(this).hasClass("css1")) {

$(this).removeClass("css1")

$(this).addClass("css2")

} else if ($(this).hasClass("css")) {

$(this).removeClass("css2")

$(this).addClass("css1")

}

})

/script

(手写不易,望采纳!)

底部导航作为公共部分怎么进行样式切换js

1引入jquery

2$('.className').each(function(index){ $(this).click(function(){ $(this).addClass('style1').siblings().removeClass('style1'); });});

className为你的导航每一项,style1为你的新样式。

js的切换样式,js更改样式

本文目录一览: 1、JS点击切换s样式 2、js实现单一html页面两套css切换代码 3、js怎么实现三个按钮点击那个那个更换样式 4、js更换样式 5、想用JavaScript实现DIV样式切换

2023-12-08
js动态切换样式(js切换css样式)

本文目录一览: 1、JS或Jquery动态改变导航栏样式 2、关于js中利用DOM动态改变CSS样式,请大神提供代码 3、建站知识:如何使用JS来自由切换css样式表 4、如何实现JS onClick

2023-12-08
js取消样式设置,js取消样式设置快捷键

2022-11-25
js选中样式(js样式居中)

本文目录一览: 1、js控制选中样式 2、JS里添加样式 3、js浏览器打印 为什么单选框无选中样式 4、JavaScript改变选中的文本的字体样式 5、js如何去掉选中文字的样式 6、JS通过修改

2023-12-08
cssjs钟表样式(js表格样式)

本文目录一览: 1、JS调用CSS样式表问题(功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』) 2、JS中改变CSS样式的问题 3、css怎么样制作钟表 4、如何用JS修改已加载

2023-12-08
js换行的样式(js行内样式)

本文目录一览: 1、js如何换行 2、Javascript如何换行 3、js里输出换行怎么弄? 4、javascript用什么换行 js如何换行 直接输出html的br就能换行了,在html页面展示

2023-12-08
js创建样式类,样式的创建和使用

本文目录一览: 1、JavaScript如何创建一个类? 2、Javascript里的style怎样追加 3、怎样用JS来添加CSS样式 4、JS创建的style样式怎么使用变量 5、用JavaScr

2023-12-08
js里怎么改样式,JS修改样式

2022-11-23
js行内样式怎么写,css行内样式怎么写

本文目录一览: 1、js的行内写法是什么 2、笔记:JS设置CSS样式的几种方式 3、JS里添加样式 4、JS如何设置表格行样式? js的行内写法是什么 就是把方法写在标签里面input type="

2023-12-08
js当前元素加样式兄弟元素去掉(js修改元素样式的方法)

本文目录一览: 1、js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框? 2、js如何给目标元素的兄弟元素更改样式 3、js代码addClass和removeClass写在

2023-12-08
js的删除样式,js的删除样式表规则

本文目录一览: 1、js怎么删除css的行内样式 2、js删除css样式 3、JS脚本:jquery 如何动态添加、删除class样式方法介绍 js怎么删除css的行内样式 其实js很不好用的,一般都

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
js怎样修改样式(js怎么修改style)

本文目录一览: 1、JS 动态修改CSS 样式方法/全局 2、怎样用js修改div里标签的样式 3、JS修改CSS设置的样式 4、js 怎么通过class改变样式 JS 动态修改CSS 样式方法/全局

2023-12-08
js按钮点击样式(css按钮点击样式)

本文目录一览: 1、js怎么实现三个按钮点击那个那个更换样式 2、如何用js模拟点击class样式的按钮 3、如何用js里给按钮改变样式 4、JS 或者Jquery怎么实现:点击一个按钮之后鼠标样式改

2023-12-08
关于使用js动态修改样式问题,js动态改变字体颜色

2022-11-23
js修改宽度样式,js 修改样式

本文目录一览: 1、用js设置图片宽度 2、怎样用js设置元素宽度? 3、关于js修改div样式宽度的问题 : div.style.width=200能不能换成div.style['width']=2

2023-12-08
js指定diva样式(定义div样式)

本文目录一览: 1、如何利用js向指定位置添加一个div层 2、如何利用js向指定位置添加一个div层? 3、用JS怎么写一个点击按钮就可以改变指定div的ID或者class名呢 4、怎么让js代码只

2023-12-08
js病毒样式动画效果(js病毒样式动画效果怎么样)

本文目录一览: 1、css动画和js动画有什么区别 2、怎么用js触发css3动画 3、用JavaScript做一个模拟计算机病毒效果,当打开一个页面时,会不停地弹出窗口 4、JS 怎么动态设置CSS

2023-12-08
js创建样式(js写css样式)

本文目录一览: 1、如何用JS给div添加样式 2、JS创建的style样式怎么使用变量 3、JS里添加样式 4、用JavaScript动态建立或增加CSS样式表的实现方法 5、JS动态添加样式! 如

2023-12-08
js控制class样式修改,js如何定义class

2022-12-02