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

改变 HTML 样式

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

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

例子 1

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

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

<script>
document.getElementById("p2").style.color="blue";
</script>

例子 2

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

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
</button>

JavaScript HTML DOM - 改变 CSS的更多相关文章

  1. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

  2. JavaScript HTML DOM - 改变 HTML

    JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

  3. JavaScript(十一) HTML DOM - 改变CSS

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式. A.改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElementById( ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习: HTML DOM - 改变CSS

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用JavaScript设置和改变CSS透明度

    在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的 ...

  6. JavaScript HTML Dom改变HTML

    本人为小白,首次写博客  有不正确的地方望多多指点与见谅!! 一,改变HTML的内容 语法: document.getElementById(id).innerHTML=new HTML: 具体用法: ...

  7. javascript HTML DOM 简单介绍

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

  8. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  9. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

随机推荐

  1. select2 api参数中文文档

    select2 api参数的文档   具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数 ...

  2. vim中的分屏操作

    title: vim中的分屏操作 date: 2017-11-14 21:45:11 tags: vim categories: 开发工具 在命令行中: vim -On file1 file2 # O ...

  3. nc linux命令详解

    NetCat,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具,可通 ...

  4. html5 javascript 新增加的高级选择器更精准更实用

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. MSG结构体和WndProc窗口过程详解

    MSG结构体和WndProc窗口过程对于Windows编程非常重要,如果不了解它们,可以说就没有学会Windows编程. MSG结构体 MSG 结构体用来表示一条消息,各个字段的含义如下: typed ...

  6. 【Spark-core学习之五】 RDD宽窄依赖 & Stage

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  7. Python+OpenCV图像处理(十五)—— 圆检测

    简介: 1.霍夫圆变换的基本原理和霍夫线变换原理类似,只是点对应的二维极径.极角空间被三维的圆心和半径空间取代.在标准霍夫圆变换中,原图像的边缘图像的任意点对应的经过这个点的所有可能圆在三维空间用圆心 ...

  8. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  9. 在线视频下载利器——youtube-dl

    youtube-dl是谷歌出品的在线视频下载利器,可以用来下载youtube视频(前提是你得能上youtube). 使用方法很简单,只需要在cmd下执行youtube-de.exe +视频页面网址,程 ...

  10. 剑指offer(19)顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2, ...