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. Python之tcp server模拟Http通信

    1.python tcp server代码: import socket def main(): tcp_server_socket = socket.socket(socket.AF_INET, s ...

  2. 让Surface Shader不受光照的明暗影响

    直接上码 Shader "Custom/3DVideo" { Properties { _Color (,,,) _MainTex ("Albedo (RGB)" ...

  3. JAVAWEB应用模块（一）登录模块

    java后台代码(MD5加密+token验证): import com.smart.ssai.admin.domain.User; import com.smart.ssai.admin.servic ...

  4. Spring学习(六）

    AOP和OOP 1.OOP:Object-Oriented Programming,面向对象程序设计,是静态的,一旦类写死了就不能改变了,要更改就得修改代码重新编译,父类类型引用指向对象来实现动态性. ...

  5. 【Python】time库

  6. JAVA 注解教程（一）简单介绍

    相关网址 https://blog.csdn.net/briblue/article/details/73824058 --- 已经整理成笔记 https://blog.csdn.net/bao199 ...

  7. k线中转器

    自动同步服务器k线,将交易日k线存入共享内存,交易平台直接去共享内存取想要的数据. 默认提供期货1.3.5分钟.日线数据.如果想要自定义,可以通过copydata向它发送请求,可以提供任何周期,任何偏 ...

  8. DM9000C网卡驱动程序编写与测试

    一般网卡驱动程序厂商会给我们提供一份模板驱动,我们的工作就是需要根据自己的需要更改这个模板驱动 1.DM9000C的硬件连接 硬件连接图如下所示:它接在S3C2440的BANK4内存控制器上,它只占用 ...

  9. AcWing 803. 区间合并

    #include <iostream> #include <vector> #include <algorithm> using namespace std; ty ...

  10. usage: git remote add [<options>] <name> <url> -f, --fetch fetch the remote branches --tags import all tags and associated objects when fetching

    按照git官网提示输入 git pushgit remote add origin git@github.com:***3 / elm-1.git -u 链接git远程仓库 出现错误 usage: g ...