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++踩坑大法好 赋值和指针的区别

    1,先说结论: 两个指针指向同一个结构,一个改了结构,另一个也会改掉. 两个指针指向同一个结构,修改了其中一个的指向,并且改了其中的内容,另一个不为所动. 2,看例子 main.cpp #includ ...

  2. 【强化学习RL】必须知道的基础概念和MDP

    本系列强化学习内容来源自对David Silver课程的学习 课程链接http://www0.cs.ucl.ac.uk/staff/D.Silver/web/Teaching.html 之前接触过RL ...

  3. 计蒜客 - A1633.蒜头君的数轴

    我感觉出的很好的一道题,首先不难想到(其实我刚开始没想到),加点的个数就是找已有点两两形成区间的gcd,那么问题就出在了复杂度上,每次循环哪个区间不要复杂度过高,所以运用正反两次前缀和(?好像不能这么 ...

  4. 装饰器_python

    一.装饰器中提及的知识点 装饰器主要作用:在原函数基础上添加新功能 1.作用域:LEGB 2.高阶函数 3.闭包(在一个内部函数中,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就认 ...

  5. [CF467C] George and Job - DP,前缀和

    简单dp + 前缀和 你谷这乱标难度的风气真是-- #include <bits/stdc++.h> using namespace std; #define int long long ...

  6. echats--visualmap

    visualmap 既图片左下角的筛选按钮 1.对颜色的区分 visualMap: [ { top: 20, left: 0, right: null, // 设置文本为红色 textStyle: { ...

  7. C语言-宏定义与使用分析

    1.C语言中的宏定义 #define是预处理器处理的单元实体之— #define定义的宏可以出现在程序的任意位置 #define定义之后的代码都可以使用这个宏 2.定义宏常量 #define定义的宏常 ...

  8. How to Create an OCM Response file to Apply a Patch in Silent Mode - opatch silent

    Windows Server 2019 打补丁时缺少Oracle Configuration Manager(OCM) 响应文件处理方式. 适用: Oracle Universal Installer ...

  9. c数据结构 绪论

    四种逻辑结构:1:集合结构 结构中的数据元素除了同属于同一个集合的关系外,无任何其他关系2:线性结构 结构中的数据元素之间存在着一对一的线性关系3:树形结构 结构中的数据元素之间存在着一对多的层次关系 ...

  10. cvtColor(src, src_gray, CV_BGR2GRAY)报错

    利用cvtColor 进行灰度转换时,不能将  灰度图 转为灰度图,所以在转换前,需对原始图像进行判断. 将这个改成以下 int main(int argc, char* argv[]) { Mat ...