首页 > 编程知识 正文

js加载新样式(原生js给元素添加样式)

时间:2023-11-28 16:46:08 阅读:309994 作者:WLZJ

本文目录一览:

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。