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. vue 项目初始化

    初始化 vue init webpack-simple myproject 安裝 npm install 运行 npm run dev 访问地址 http://localhost:8080/ 安装we ...

  2. 环境配置 | mac环境变量文件.bash_profile相关

    每次环境配置都费老劲,零零碎碎的知识就记在这里 文件:~/.bash_profile

  3. Go_go build 和 go install

    1.作用 go build:用于测试编译包,在项目目录下生成可执行文件(有main包). go install:主要用来生成库和工具.一是编译包文件(无main包),将编译后的包文件放到 pkg 目录 ...

  4. Rider代码格式设置

    单选注释格式设置: File/Settings(Ctrl+Alt+S/Command+Option+S)/Code Style/C#选择Other

  5. python面试的100题(5)

    5.现有字典 d= {'a':24,'g':52,'i':12,'k':33}请按value值进行排序? sorted(d.items(),key=lambda x:x[1]) sorted函数 对由 ...

  6. quartus 9.0 对话框显示不完整

    今天在quartus9.0新建SOPC build时,发现在添加PLL时对话框太大,笔记本分辨率差,导致结束和next不能选择: 解决: 如果电脑分辨率可以调整为合适的,就去调整: 现在介绍分辨率不合 ...

  7. python之路之模块

    subprocess模块 复杂命令 logging模块(重点) 日志模块,线程安全

  8. spring(四):IoC

    IoC-Inversion of Control,即控制反转 IoC意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制. 理解IoC的关键:"谁控制谁,控制什么,为何是反 ...

  9. 常见python面试题

    1,简述列举了解的编程语言及语言间的区别? Python 解释型语言,代码简洁,易懂 C语言 编译型语言,底层语言 c++ 编译型语言,在C语言基础上加了面向对象 Java 混合型语言,可拓展性高 G ...

  10. argmax( )

    argmax是一种函数,是对函数求参数(集合)的函数. 当我们有另一个函数y=f(x)时,若有结果x0= argmax(f(x)),则表示当函数f(x)取x=x0的时候,得到f(x)取值范围的最大值: ...