如何利用js实现在指定节点添加style？

通过节点的style属性添加

1、定义一个节点

<div id='tsdiv'></div>

2、获取div节点

var domdiv = document.getElementById('tsdiv')//通过document.getElementById获取dom节点

3、添加style

div.style.display = 'none'//添加style属性，设置display样式为none

一般添加css样式表的方式有3种！

一种是引入css样式表，引入css样式表一般用link的方式引入，代码如下

<link href="路径和css样式表的名称" rel="stylesheet" type="text/css">

如果对写代码不是很流利的话可以用DW 手动引入， *** 作步骤图片如下：

选择好了点击确认就可以了。添加好了之后你会看到就是上面所示的代码！

那么第二种添加css样式的方法是网页里添加css样式

<style>

.header{}

</style>（这种方式不推荐哦）

第三种就是在你需要给某个区块添加特殊的样式比如 你的div区块里的特定区块需要单独添加一个样式。

例如：

<div class="main_left">

<ul>

<li class="name"></li>

<li class="neirog">

<p style="color:#F00"></p>

</li>

</ul>

</div>

如上所示 在给P 标签添加了一个样式，这种方法也不是很推荐的！ 除特定的需求除外。

思路

1、通过cssText的方式进行拼接。

2、通过设置class，累加设置class的方式进行。

代码示例

1、第一种方式可以用下面函数，el表示dom节点，strCss表示要设置的样式

function setStyle(el, strCss){

    function endsWith(str, suffix) {

        var l = str.length - suffix.length

        return l >= 0 && str.indexOf(suffix, l) == l

    }

    var sty = el.style,

        cssText = sty.cssText

    if(!endsWith(cssText, '')){

        cssText += ''

    }

    sty.cssText = cssText + strCss

} 2、第二种方式把样式定义成class，element表示dom节点，value表示class名称

function addClass(element,value){  

if(!element.className){            

element.className=value

}else{

newClassName=element.className

newClassName+=""

newClassName+=value

element.className=newClassName

}

}

---