怎样用JS获取CSS中class中的值

JavaScript012

怎样用JS获取CSS中class中的值,第1张

思路:首先获取div对象,然后使用className属性获取类名,关键代码如下

1

document.getElementById("test").className

实例演示:

1、HTML结构

1

2

<div id = "test" class="test_class">我的类名为test_class</div>

<input type='button' value='获取div类名' onclick="fun()"/>

2、javascript代码

1

2

3

4

function fun(){

name = document.getElementById("test").className

alert(name)

}

一。

js中对class并没有像对id有

getElementById("id")相对操作的getElementByClassname("name")。你可以自行定义,但一般情况可通过

obj.setAttribute("className")和obj.getAttribute("classname")对class进行基本操作。

二。

{

ok=obj.getAttribute("className")'}//for

IEelse{

ok=obj.getAttribute("class")}//for

FFobj.className=ok

}这里要取得class的值时,IE使用的是

obj.getAttribute("className")而FF要用obj.getAttribute("class")。

在页面内用JS操作CSS除非用AJAX,但操作页面内的样式的话,是可以的。操作样式分为改变直接样式,改变className和改变cssText三种

一、局部改变样式

调用方法:

改变className

<div

id="demo">测试</div>

<script>

document.getElementById('demo').className="test"

</script>

改变直接样式

<div

id="demo">测试</div>

<script>

document.getElementById('obj').style.backgroundColor="#003366"

</script>

二、全局改变样式

可以通过改变外链样式的的href的值实现网页样式的实时切换

<link

rel

=

"stylesheet"

type="text/css"

id="css"

href="firefox.css"

/>

<span

on

click="javascript:document.getElementById('css').href

=

'ie.css'">点我改变样式</span>