關於使用js動態修改樣式問題,js動態改變字體顏色

本文目錄一覽：

• 1、JS 動態修改CSS 樣式方法/全局
• 2、JS或Jquery動態改變導航欄樣式
• 3、如何實現JS動態修改css全局樣式
• 4、js動態修改bootstrap的css樣式，無效 ？
• 5、關於js中利用DOM動態改變CSS樣式，請大神提供代碼

JS 動態修改CSS 樣式方法/全局

如何配置自行百度

1.scss文件定義變量

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

都是獲取DOM

通過DOM分別修改當前DOM樣式屬性值、

當前DOM整體css樣式、

修改當前DOM的className類名、

將link引入的標籤作為DOM 修改link的href，從而修改引用的樣式表。

詳情轉自：

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動態修改css全局樣式

用css樣式相關的接口 stylesheet.insertRule或者stylesheet.addRule 這兩個都可以動態插入css樣式 兼容性還可以 ie9+

比如

myStyle.insertRule(“#blanc { color: white }”, 0);

需要刪除的時候還有deleteRule和removeRule兩個方法

js動態修改bootstrap的css樣式，無效 ？

你js動態修改是成功了的；點擊是增加了bg-color類的。但是

bootstrap里的導航點擊顏色是

.navlia:focus, .navlia:hover{}這個；

你寫的是加在上級li上面的。li下面的a點擊是有顏色所以覆蓋掉了。

解決方法1；

把.navlia:focus, .navlia:hover{background-color：none}去掉默認點擊設置的顏色。

或者直接修改 .navlia:focus, .navlia:hover{background-color：這裡設置顏色}，不需要點擊增加類。

2、把點擊增加類的時間添加到a上面；然後設置 .navlia.bg-color:hover{}

關於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

望採納！