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，從而修改引用的樣式表。

詳情轉自：