css动态添加父元素

html-css011

css动态添加父元素,第1张

CSS都是写样式的,不涉及动态操作,所以没有寻找父元素的技能,如果你想给某个元素的父元素设样式,直接给它加class或id就好了。js是有可能涉及到运行过程中有dom的动态操作的,所以有这个技能,就是xx.parentNode, 就能直接拿到xx的父元素了。

网页的动态效果你说的这里的动态效果是让一个画面或者文字动一下吧?因为在专业里边动态是与数据库连接的后台的技术。

css是层叠样式表,是不能够实现动态效果的。但是可以让某个画面动,比如:

一个文字点击的时候,变大的css代码为:

a{font-size:12px}      /*这里文字默认大小是12像素*/

a:hover{font-size:14px}      /*这里鼠标经过大小是14像素*/

上边这个简单的代码就实现鼠标经过a的时候,文字变大,离开又恢复。

希望能帮到你

动态加载外部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 )

}

}