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. 利用ROWID 快速更新单表记录

    -----对于普通表 实现: UPDATE T_PM_DEPOSIT_HIS b SET flag = SUBSTR( flag, 1, 8 )||'4'|| CASE WHEN term <= ...

  2. 程序员欢呼:微软Bing开始支持搜索源码、可直接运行!

    日常生活中,程序员们经常会遇见这样那样的问题,比如忘记了代码该怎么写,又或者需要实现一些特殊的算法和功能.这时候,你就可以去找微软 Bing 帮忙啦! 微软最近联合 HackerRank 一起研发了一 ...

  3. 高清摄像头MIPI接口与ARM处理器的连接

    MIPI摄像头常见于手机.平板中,支持500万像素以上高清分辨率.它的全称为“Mobile Industry Processor Interface”,分为MIPI DSI 和MIPI CSI,分别对 ...

  4. SWMM代码移植到64位平台

    在32位平台上运行SWMM模型,当节点数量到达60万以上的时候,模型运行占用内存接近1.85G的时候就会因为内存不够而无法计算.这种情况还是单独运行SWMM.exe的时候出现,如果采用SWMM.DLL ...

  5. OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】(二)——网络节点的安装

    序:OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE] 网络节点: 1.安装前更新系统 安装好ubuntu 12.04 Server 64bits后,进 ...

  6. XSS 简单理解

    什么是XSS? XSS(Cross Site Scripting),即跨站脚本攻击,是一种常见于web application中的计算机安全漏洞.XSS通过在用户端注入恶意的可运行脚本,若服务器端对用 ...

  7. Parallel.Foreach的全部知识要点【转】

    简介 当需要为多核机器进行优化的时候,最好先检查下你的程序是否有处理能够分割开来进行并行处理.(例如,有一个巨大的数据集合,其中的元素需要一个一个进行彼此独立的耗时计算). .net framewor ...

  8. Eclipse(Myeclipse)安装GoogleGWT

    1,下载gpe http://code.google.com/p/googleappengine/并安装. 2,下载gwt http://code.google.com/intl/zh-CN/webt ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid 没有源码的同学跳到第六讲下载源码再来. 我们需要漂亮的UI, ...

  10. 教你Mac OS系统四种改动Hosts文件的方法

    使用Mac OS X系统的用户.在某些时候可能遇到了须要改动系统Hosts文件的情况,那么Mac OS系统怎样改动Hosts文件呢?和Windows系统有何差别呢?我们知道事实上改动Hosts文件仅仅 ...