使用原生JavaScript为HTML元素动态添加新样式

本文目录一览：

• 
  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.;