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" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

亲自试一试

JavaScript HTML DOM - 改变 CSS相关推荐

JavaScript HTML DOM - 改变 HTML
改变 HTML 输出流在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容. <script>document.write(Date()) ...
uniapp修改html样式,关于css:uniapp操作dom改变css样式
在uniapp中,想给元素增加一些动静的css款式,例如transform, uni.createSelectorQuery().select(".sticke").boundin ...
前端入门之——javascript day8 DOM对象(DHTML)
DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
js函数改变html样式,JavaScript改变CSS样式的方法汇总
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
【前端】第二章 HTML、CSS、JavaScript、DOM和JSON
第二章 HTML.CSS.JavaScript.DOM和JSON 文章目录第二章 HTML.CSS.JavaScript.DOM和JSON 一.HTML 1.表单 2.小票 3.注册页面 4.音视频 ...
javascript鼠标点击实现改变CSS样式
javascript通过改变元素class名达到间接改变CSS样式 CSS: /* 字体链接样式 */ td.firstLevelMenuClass a:link {color: #3E8BAC; t ...
javascript之DOM总结
1.简介当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树,这种结构被称为节点树: 节点树中的节点彼此拥有层级关系 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

JavaScript HTML DOM - 改变 CSS

改变 HTML 样式

例子 1

例子 2

更多实例

JavaScript HTML DOM - 改变 CSS相关推荐

最新文章

热门文章