js动态切换样式（js切换css样式）

本文目录一览：

• 1、JS或Jquery动态改变导航栏样式
• 2、关于js中利用DOM动态改变CSS样式，请大神提供代码
• 3、建站知识:如何使用JS来自由切换css样式表
• 4、如何实现JS onClick 点击切换效果
• 5、想用JavaScript实现DIV样式切换
• 6、JS 动态修改CSS 样式方法/全局

JS或Jquery动态改变导航栏样式

简单的插件代码如下：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

title动态导航插件/title

style type=”text/css”

!–

body, td, th {

font-size: 14px;

background-color:#FFF

}

h1{border-bottom:1px solid #999; margin:50px 60px;}

/*导航默认样式，可根据实际情况修改*/

* {

margin:0;

padding:0

}

.nav {

width:980px;

height:30px;

left:50%;

margin-left:-490px;

list-style:none;

position:relative;

}

.nav li {

display:inline-block;

margin:0 3px;

position:relative;

overflow:hidden;

height:30px; /*建议此高度大于等于里面的a标签高度*/

float:left;

}

.nav li span {

display:inline-block;

overflow:hidden

}

.nav li a {

text-decoration:none;

outline:none;

color:#666;

display:inline-block;

padding:0 10px;

text-align:center;

background-color: #E1E1E1;

font-weight:bold;

height:30px;

line-height:30px;

}

/*鼠标经过时样式*/

.nav li a.over {

background-color:#666;

color:#FFF

}

—

/style

script type=text/javascript src=””/script

script type=”text/javascript”

(function($){

$.fn.dynamicNav=function(options){

//默认配置

var defaults = {

direction:”up”, //动画切换方向，总共4种up 、down 、left 、right

duration:100 //三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

};

// 覆盖默认配置

var opts = $.extend(defaults, options);

this.each(function(){

var navList=$(this).find(“li”),

navLink=navList.find(“a”);

//在a标签外侧插入span

navList.wrapInner(“span/span”);

var span=navLink.parent();

//判断是否垂直切换

if(opts.direction==”up” || opts.direction==”down”){

var v=true;

}

//判断是否改变span初始位置及a样式

if(opts.direction==”right” || opts.direction==”down”){

var restSpan=true;

}

navLink.each(function(){

//获取a高度和宽度

var w=$(this).outerWidth(),

p=$(this).parent();

//初始复制现有a标签

$(this).clone().appendTo(p).addClass(“over”);

//如果是垂直切换

if(v){

p.css(“width”,w);

}else{

p.css(“width”,2*w).parent().css(“width”,w);

}

});

//如果向右或向下切换，改变span初始位置及a样式

if(restSpan){

span.each(function(){

if(opts.direction==”right”){

$(this).css({“margin-left”:-$(this).outerWidth()/2});

}

if(opts.direction==”down”){

$(this).css({“margin-top” : -$(this).outerHeight()/2});

}

$(this)

.find(‘a’)

.last()

.removeClass(“over”)

.prev()

.addClass(“over”);

});

}

//鼠标经过时动画函数

function over(o){

o.animate(v?{“margin-top”: -o.outerHeight()/2}:{“margin-left”: -o.outerWidth()/2}, opts.duration);

}

//鼠标移开时动画函数

function out(o){

o.animate(v?{“margin-top”:0}:{“margin-left”: 0}, opts.duration);

}

//鼠标经过和离开

span.hover(function(){

restSpan ? out($(this)) : over($(this));

},function(){

restSpan ? over($(this)) : out($(this));

});

});

};

})(jQuery);

$(function(){

//向左

$(“#nav1”).dynamicNav({

direction:”left”, //动画切换方向，总共4种up 、down 、left 、right

duration:300 //三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

});

//向右

$(“#nav2”).dynamicNav({

direction:”right”,

duration:200

});

//向上

$(“#nav3”).dynamicNav({

direction:”up”,

duration:100

});

//向下

$(“#nav4”).dynamicNav({

direction:”down”,

duration:400

});

});

/script

/head

body

h1向左（速度300毫秒）/h1

ul class=”nav” id=”nav1″

lia href=””首页/a/li

lia href=””前端技术/a/li

lia href=””视觉设计/a/li

lia href=””文章归档/a/li

lia href=””工具/书籍/a/li

lia href=””关于我/a/li

/ul

h1向右（速度200毫秒）/h1

ul class=”nav” id=”nav2″

lia href=””首页/a/li

lia href=””前端技术/a/li

lia href=””视觉设计/a/li

lia href=””文章归档/a/li

lia href=””工具/书籍/a/li

lia href=””关于我/a/li

/ul

h1向上（速度100毫秒）/h1

ul class=”nav” id=”nav3″

lia href=””首页/a/li

lia href=””前端技术/a/li

lia href=””视觉设计/a/li

lia href=””文章归档/a/li

lia href=””工具/书籍/a/li

lia href=””关于我/a/li

/ul

h1向下（速度400毫秒）/h1

ul class=”nav” id=”nav4″

lia href=””首页/a/li

lia href=””前端技术/a/li

lia href=””视觉设计/a/li

lia href=””文章归档/a/li

lia href=””工具/书籍/a/li

lia href=””关于我/a/li

/ul

/body

/html

关于js中利用DOM动态改变CSS样式，请大神提供代码

代码如下：

!DOCTYPE html

html

head

meta charset=”UTF-8″

titleTest/title

script src=”” type=”text/javascript” charset=”utf-8″/script

style

*{

/*margin: 0px;

padding: 0px;*/

}

.test1{

width: 100%;

height: 22px;

line-height: 22px;

border: 2px solid #ccc;

}

/style

/head

body

div class=”test1″公告内容/div

br /

button class=”changestyle”更改样式/button

script

$(function(){

$(“.changestyle”).off(“click”).on(“click”,function(){

$(“.test1”).css({

“font-size”:”16px”,

“font-weight”:”bold”,

“border”:”2px solid blue”,

“width”:”200px”,

“height”:”100px”,

“text-align”:”center”,

“line-height”:”100px”,

“color”:”red”

});

});

});

/script

/body

/html

望采纳！

建站知识:如何使用JS来自由切换css样式表

详细方法如下：第一步：在连接样式表的元素里定义一个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/aa href=”#” onClick=”change（2）”2.css/a该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，好比年迈者可以选择一个字体较大的样式表。这里需要留意的两点是：另外假如是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%

如何实现JS onClick 点击切换效果

1、使用js动态操作元素样式

//定义onClick方法

function click(){

    document.getElementById(“p1″).style.display=”block”;

    document.getElementById(“p2″).style.display=”none”;

}

2、先写好css在onClick事件中改变元素class

.show{display:block;}

.hidden{display:none;}

/定义onClick方法

function click(){

    document.getElementById(“p1″).className=”show”;

    document.getElementById(“p2″).className=”hidden”;

}

想用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 动态修改CSS 样式方法/全局

如何配置自行百度

1.scss文件定义变量

2.js中更改$textColor 变量的值

都是获取DOM

通过DOM分别修改当前DOM样式属性值、

当前DOM整体css样式、

修改当前DOM的className类名、

将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。

详情转自：