JavaScript HTML DOM - 改变CSS

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>The paragraph above was changed by a script.</p>

</body>
</html>

尝试一下 »

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

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

尝试一下 »

更多实例

Visibility
如何使元素不可见。您希望元素显示或消失吗？

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

  1. JavaScript HTML DOM - 改变 CSS

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

  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. 14.7.1 Resizing the InnoDB System Tablespace InnoDB 系统表空间大小

    14.7.1 Resizing the InnoDB System Tablespace InnoDB 系统表空间大小 这个章节描述如何增加或者减少 InnoDB 系统表空间的大小 增加InnoDB ...

  2. android.graphics.Matrix

    Matrix类包含了一个3x3的矩阵用来改变坐标,它没有一个构造器来初始化它里边的内容,所以创建实例后需要调用reset()方法生成一个标准matrix,或者调用set..一类的函数,比如setTra ...

  3. jQuery动态五星评分

    效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...

  4. u-boot中分区和内核MTD分区关系

    一.u-boot中环境变量与uImage中MTD的分区关系 分区只是内核的概念,就是说A-B地址放内核,C-D地址放文件系统,(也就是规定哪个地址区间放内核或者文件系统)等等. 一般我们只需要分3-4 ...

  5. Windows玩转Docker(一)：安装

    Docker官网地址: http://www.docker.com/ 本文参照site: https://docs.docker.com/windows/ Docker 项目的目标是实现轻量级的操作系 ...

  6. LOL游戏程序中对一些函数的Hook记录(Win10 x64)

    [PC Hunter Standard][League of Legends.exe-->Ring3 Hook]: 108Hooked Object Hook Address and Locat ...

  7. SSH服务及花生壳域名解析

    一.安装说明以CentOS 5为例 1.安装必要的开发包 [root@localhost ~]# yum install gcc gcc-c++ autoconf automake 2.下载phddn ...

  8. 封装Unity3d的dll时的经验总结

    部分时候,我们需要自己封装一些小工具来简化我们的工作. 实验时,偶然发现Unity3d的console在双击进行debug信息的输出定位时,只能跟进到dll的上一层,因此我们可以将unity3d自带的 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  10. 《31天成为IT服务达人》之精准运维

     1       第十四章精准运维服务 近年来国内IT产业的发展格局始终与我国的经济转型与创新创业的社会大潮息息相关,纵观国内国际形势,IT产业仍是创新的领头者,是解决人类各种经济危机的主要扮演者 ...