救命,如何用js给div标签添加css属性,当鼠标事件发生的时候,譬如点击某个元素

html-css08

救命,如何用js给div标签添加css属性,当鼠标事件发生的时候,譬如点击某个元素,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('div').click(function () {$(this).css('color', 'blue')})。

3、浏览器运行index.html页面,此时点击123所在的div,div会变为蓝色文本。

在页面内用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>

例如改变背景色:

1234567<div id="changeColor">使用JS改变背景色</div><script>var cc = document.getElementById("changeColor")cc.style.backgoundColor="#000"//将背景色改为黑色cc.style.fontSize="20px"// 将文字大小改为20px,等号右边也可以写为20+"px"cc.style.color="#fff"//将文字颜色改为白色</script>