怎样通过js来为网页元素添加CSS样式

在js中 , 可以使用getElementById()方法通过id获得网页元素对象 , 通过给style属性中的css样式属性赋值 , 从而实现给网页元素添加css样式 。 下面小编以改变文字为例 , 讲解怎样通过js来为网页元素添加CSS样式 。

怎样通过js来为网页元素添加CSS样式

文章插图

需要这些哦
html+js
代码编纂器:Dreamweaver CS5
方式/
1新建一个html文件 , 定名为test.html , 用于如何经由过程js来为网页元素添加CSS样式 。
怎样通过js来为网页元素添加CSS样式

文章插图

2在test.html文件内 , 利用p标签建立一行文字 , 文字内容为“这是测试的文字内容 。 ” 。
怎样通过js来为网页元素添加CSS样式

文章插图

3在test.html文件内 , 设置p标签的id属性值为bbtest , 本家儿要用于下面经由过程该id获得p对象 。
怎样通过js来为网页元素添加CSS样式

文章插图

4在test.html文件内 , 利用button标签建立一个按钮 , 按钮名称为“添加CSS样式” 。
怎样通过js来为网页元素添加CSS样式

文章插图

5在test.html文件中 , 给button按钮绑定onclick点击事务 , 当按钮被点击时 , 执行addcs函数 。
怎样通过js来为网页元素添加CSS样式

文章插图

6在js标签中 , 建立addcs()函数 , 在函数内 , 利用getElementById方式经由过程id(bbtest)获得p标签对象 , 经由过程设置style属性中的color属性 , 实现改变文字的颜色 , 例如 , 这里改变文字的颜色为蓝色blue 。
怎样通过js来为网页元素添加CSS样式

文章插图

7在浏览器打开test.html文件 , 点击按钮 , 查看实现的结果 。
怎样通过js来为网页元素添加CSS样式

文章插图

怎样通过js来为网页元素添加CSS样式

文章插图

总结:1【怎样通过js来为网页元素添加CSS样式】1、建立一个test.html文件 。
2、在文件内 , 利用p标签建立一行文字 , 设置p标签的id属性值为bbtest 。 同时建立一个button按钮 , 用于触发执行js函数 。
3、在js标签内 , 建立函数 , 在函数内 , 利用getElementById方式经由过程id(bbtest)获得p标签对象 , 经由过程设置style属性中的color属性 , 实现改变文字的颜色 。

注重事项style属性中除了color属性 , 还有fontsize属性 , width属性 , height属性等 。

以上内容就是怎样通过js来为网页元素添加CSS样式的内容啦 , 希望对你有所帮助哦!

    推荐阅读