本文目录一览:
- 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';