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

改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

下面的例子更改了 <p> 元素的样式：

实例

<html>

<body>

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

<script>

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

</script>

<p>上面的段落已被脚本改变。</p>

</body>

</html>

使用事件

HTML DOM 允许您在事件发生时执行代码。

当“某些事情”在 HTML 元素上发生时，浏览器会生成事件：

  • 点击某个元素时
  • 页面加载时
  • 输入字段被更改时

您将在本教程的下一章学到更多有关事件的知识。

本例会在用户点击按钮时，更改 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>

松软科技课堂:JavaScriptDOM - 改变 CSS的更多相关文章

  1. 松软科技课堂:sqlserver--数据类型

    SQL Server 数据类型(文章来源:松软科技www.sysoft.net.cn) Character 字符串: 数据类型 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符. ...

  2. 松软科技课堂:SQL--UNIQUE约束

    SQL UNIQUE 约束(文章来源:松软科技-www.sysoft.net.cn-) UNIQUE 约束唯一标识数据库表中的每条记录. UNIQUE 和 PRIMARY KEY 约束均为列或列集合提 ...

  3. 松软科技课堂:Winform之TextBox

    松软科技文(www.sysoft.net.cn): 文本框的几种模式:Multiline(多行).PasswordChar(密码)将文本框的PasswordChar设为*就是密码框效果,将MultiL ...

  4. 松软科技课堂:JS HTML DOM

    通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素. HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Objec ...

  5. 松软科技课堂:jQuery 语法

    jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...

  6. 松软科技课堂:sql函数-AVG

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

  7. 松软科技课堂:SQL之NOTNULL约束

    SQL NOT NULL 约束 NOT NULL 约束强制列不接受 NULL 值. NOT NULL 约束强制字段始终包含值.这意味着,如果不向字段添加值,就无法插入新记录或者更新记录. 下面的 SQ ...

  8. 松软科技课堂:SQL-SELECT-INTO语句

    SQL SELECT INTO 语句可用于创建表的备份复件. SELECT INTO 语句 SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中. SELECT INTO 语句常用 ...

  9. 松软科技课堂:SQLUNION和UNIONALL操作符

    SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...

随机推荐

  1. c++ 踩坑大法好 char字符，char数组，char*

    1,基本语法 1,定义一个char字符: char hehe='a'; //单引号 2,定义一个由char字符组成的数组: char daqing[] = "abcd"; char ...

  2. JavaScript中四种不同的属性检测方式比较

    JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...

  3. vue 中的路由为什么 采用 hash 路由模式，而不是href超链接模式(Hypertext，Reference)？

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  4. Docker+JMeter单机版+MinIO

    基于JMeter5.1.1+MinIO JMeter发起压测  MinIO作为文件服务器 一.目录结构: Dockerfile文件: FROM ubuntu:18.04# 基础镜像 MAINTAINE ...

  5. jdk8-》reduce操作

    什么是reduce操作 聚合操作,中⽂意思是 “减少” 根据⼀定的规则将Stream中的元素进⾏计算后返回⼀个唯⼀的值 常⽤⽅法⼀: Optional<T> reduce(BinaryOp ...

  6. 题解【洛谷P5959】[POI2018]Plan metra

    题面 一道比较神仙的构造题. 首先确定 \(1\) 到 \(n\) 的路径长度,不妨设其长为 \(m\) . 通过观察发现,\(m\) 就是 \(\min_{1<i<n}\{dist_{1 ...

  7. mysql内核测试&原理学习

    参考资料:https://www.cnblogs.com/f-ck-need-u/p/9001061.html#blog5

  8. Unity 坐标系转换

    在Unity中我们通常会用到以下几个坐标系下的点: 世界坐标系:World Space 简单来讲,我们通过 transform.position | transform.rotation 获取得到的位 ...

  9. mediasoup-demo解析-客户端

    1.gulp任务管理 app官方文档 npm start启动app,执行脚本: "start": "gulp live" 该命令用启动gulp顺序任务组合liv ...

  10. Django REST framework快速入门(官方文档翻译翻译)

    开始 我们将创建一个简单的API来允许管理员用户查看和编辑系统中的用户和组. 项目设置 创建一个新的django项目,命名为:<tutorial>,然后创建一个新的应用程序(app),命名 ...