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. VI 命令学习指南

    ctrl+b 屏幕向后(上)移动一屏 ctrl+f 屏幕向前(下)移动一屏 ctrl+u 屏幕向后(上)移动半屏 ctrl+d 屏幕向前(下)移动半屏

  2. 通过ComponentName获取相应的Widget

    最近在锁屏上研究,如果预置widget,研究了好久,终于找到方法了,先上代码: private int getAppWidgetFromComName(ComponentName providerCo ...

  3. Android应用连接代理服务器状况监测解决

    最近项目里面有这样一个需求,由于项目涉密需要连接VPN通过网址映射去登录内部服务器,而且要通知客户vpn的连接状态.网上有许多类似的连接VPN的解决方案,我也尝试了很多种,下面先列出一种比较靠谱的方式 ...

  4. 在ASP.NET MVC中对手机号码的验证

    在ASP.NET MVC中,可以使用RegularExpression特性来验证手机号码. public class Customer { [Required(ErrorMessage = " ...

  5. MyEclipse Spring被删之后,如何在myeclipse里面重新导入

    1.找到项目文件 2.用记事本打开 .project 把里面涉及到spring的全部删除就可以了.

  6. poj 1080 dp如同LCS问题

    题目链接:http://poj.org/problem?id=1080 #include<cstdio> #include<cstring> #include<algor ...

  7. 将证书写到jre中

    第一步: 取得要导入的证书. 第二步: 开启CMD,进入Java/jre6/lib/security 目录下. 第三步: 执行以下命令: keytool -import -alias cacerts ...

  8. ListBoxControl 删除选择的项的方法

    public void RemoveSelectItems<T>(BaseListBoxControl listControl)        {            var list ...

  9. Tomcat工作原理(转)

    Tomcat简介 作者:杨晓(http://blog.sina.com.cn/u/1237288325) 一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group ...

  10. WCF服务发布到IIS时候,只能根据hostname访问,不能根据IP地址访问的解决办法

    本文转载:http://www.cnblogs.com/deerbox/archive/2013/05/13/3076248.html 环境: VS2010 sp1,.net framework 4. ...