js加載新樣式（原生js給元素添加樣式）

本文目錄一覽：

• 1、JS控制CSS 鼠標滑過就加栽新的CSS樣式
• 2、沒有分了，求幫助—用js在頁面加載後添加樣式
• 3、如何實現JavaScript動態加載CSS和JS文件
• 4、如何用JS修改已加載的CSS樣式表樣式？

JS控制CSS 鼠標滑過就加栽新的CSS樣式

style

    .abc{xxxx}

    .bcd{xxxx}

/style

比如li id=”abc” class=”abc”/li

script

    var abc=document.getElementById(“abc”);

    abc.onmouseover=function(){

        this.className=”bcd”;

        this.onmouseout=function(){

            this.className=”abc”

        }

    }

script

沒有分了，求幫助—用js在頁面加載後添加樣式

圖片看不清，說下思路吧：用jQuery實現，當Dom結果加載完畢，選取第二個ul加上open，兄弟節點去掉open。當然了，到底展開第幾個ul你自己判斷，你肯定有判斷依據吧。比如：

jQuery(document).ready(function(){

$(“#menu_zzjsnet”).children().eq(1).addClass(“open”);

$(“#menu_zzjsnet”).children().eq(1).siblings().removeClass(“open”)

});

判斷依據不一定是序號，你也可以自定義，靈活應用，能找到你要的那個標籤就行，重點是樣式。

如何實現JavaScript動態加載CSS和JS文件

動態加載外部css樣式及css樣式，參考代碼如下：

// 動態加載外部js文件

var flag = true;

if( flag ){

loadScript( “js/index.js” );

};

function loadScript( url ){

var script = document.createElement( “script” );

script.type = “type/javascipt”;

script.src = url;

document.getElementsByTagName( “head” )[0].appendChild( script );

};

// 動態加載js

if( flag ){

var script = document.createElement( “script” );

script.type = “text/javascript”;

script.text = ” “;

document.getElementsByTagName( “head” )[0].appendChild( script );

};

// 動態加載外部css樣式

if( flag ){

loadCss( “css/base.css” );

};

function loadCss( url ){

var link = document.createElement( “link” );

link.type = “text/css”;

link.rel = “stylesheet”;

link.href = url;

document.getElementsByTagName( “head” )[0].appendChild( link );

};

// 動態加載css樣式

if( flag ){

var style = document.createElement( “style” );

style.type = “text/css”;

document.getElementsByTagName( “head” )[0].appendChild( style );

var sheet = document.styleSheets[0];

insertRules( sheet,”#gaga1″,”background:#f00″,0 );

};

function insertRules( sheet,selectorTxt,cssTxt,position ){

if( sheet.insertRule ){ // 判斷非IE瀏覽器

sheet.insertRule( selectorTxt + “{” + cssTxt +”}” ,position );

}else if( sheet.addRule ){ //判斷是否是IE瀏覽器

sheet.addRule( selectorTxt ,cssTxt ,position )

}

}

如何用JS修改已加載的CSS樣式表樣式？

js是無法直接修改css文件的，但可以通過取對象的方式修改對象的樣式，通常有兩種方法：

1、改變className，但首先在樣式表中預設定樣式類。

例如：document.getElementById(‘obj’).className=’…’;

2、改變cssText。

例如：document.getElementById(‘obj’).style.height=’100px’;