JavaScript HTML DOM-改变CSS

JavaScript HTML DOM-改变CSS
2021年08月19日19:17:12 0 468

JavaScript HTML DOM-改变CSS

 

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式

下面的例子会改变 <p> 元素的样式:

实例

<html>

<body>

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

</script>

<p>以上段落通过脚本修改。</p>

</body>

</html>


使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件:

  • 元素被点击。

  • 页面加载完成。

  • 输入框被修改。

在接下来我介绍关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

实例

<!DOCTYPE html>

<html>

<body>

<h1 id="id1">我的标题 1</h1>

<button type="button"

onclick="document.getElementById('id1').style.color='red'">

点我!</button>

</body>

</html>

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
猜您今天喜欢
猜您
喜欢
历史上的今天
05月
17
HTML DOM Meter 对象 菜鸟教程

HTML DOM Meter 对象

HTML DOM Meter 对象 Meter 对象 Meter 对象是 HTML5 中新增的。 Meter 对象表示一个 HTML meter 元素。 访问 Meter 对象 您...
Scala,Array,集合,、,序列,Scala,Array,集合,、,序列, 菜鸟教程

Scala:Array(集合、序列)

Scala:Array(集合、序列) Scala开篇(目录) 数组是一种可变的、可索引的数据集合。在Scala中用Array[T]的形式来表示Java中的数组形式 T[]。 val...
语言,入门教程,十,之,函数,语言,入门教程,十, 菜鸟教程

Go语言入门教程(十)之函数

Go语言入门教程(十)之函数 Hello 各位小伙伴大家好,我是小栈君,假期一眨眼就过去了。不知道大家玩的是否开心呢? 上次我们讲到了关于Go语言的流程控制,小栈君也希望小伙伴跟着...
css3,的,transition,属性,css3,的,transition,属性, 菜鸟教程

css3的transition属性

css3的transition属性 css3的transition属性 许多属性值都需要自己不断积累,下面小编给大家分享一个很好用的属性值: 示例 浏览器支持 同一列...
flask,教程,简介 菜鸟教程

Flask教程1-简介

一、简介Flask是使用Python编写的Web微框架(microframework),Flask仅保留了Web框架的核心,其他的功能都交给扩展实现,如果没有合适的扩展,大家甚至可...

Comment list 共有 0 条评论

暂无评论