JavaScript HTML DOM - 改变 CSS

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>

亲自试一试

更多实例

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

HTML DOM Style 对象参考手册

如需完整的 HTML DOM Style 对象属性,请参阅我们的 HTML DOM Style 对象参考手册

时间: 2024-10-20 12:27:05

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

JavaScript HTML DOM - 改变CSS

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&

JavaScript HTML DOM——改变CSS(样式)

HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 1.改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 1 document.getElementById(id).style.property=new style 举例1(下面的例子会改变 <p> 元素的样式): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8&q

JavaScript之DOM改变HTML的样式

改变 HTML 样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式.如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素. 基本属性表(property): 注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改. 看看下面的代码: 改变 <p> 元素的样式,将颜

JavaScript HTML DOM - 改变 HTML

原文http://www.w3school.com.cn/js/js_htmldom_html.asp 改变 HTML 输出流 JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Wed Jun 22 2016 10:15:30 GMT+0800 (中国标准时间) 在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容. <script> document.write(Date()); </script> 提示:绝不

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

在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制: #myElement {filter: alpha(opacity=40);}您可以使用下面的语法访问JavaScript中的CSS opacity 属性: document.getElementById("myElement&quo

Web开发技术&mdash;&mdash;JavaScript HTML DOM1(基础、改变HTML、改变CSS)

JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改

javascript HTML DOM 简单介绍

JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS

JavaScript的DOM(文档对象)基础语法总结1

---恢复内容开始--- 前言:HTML文档可以说由节点构成的集合,DOM节点有: 1). 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2). 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3). 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com". 1.节点属性: 2.遍历节点树

javascript操作DOM的方法与属性

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3.