JavaScript学习笔记之通过DOM操作CSS
2016-09-12 08:35
931 查看
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /* 设置CSS样式 */ #did{ width:200px; height:200px; background-color:green; } </style> <script type="text/javascript"> function Demo() { var id = document.getElementById("did"); // 通过id获取到元素; id.style.backgroundColor = "blue"; // 修改元素的背景颜色; id.style.color = "red"; // 修改元素的字体颜色; } </script> </head> <body> <div id="did"> 我是一个div,咿呀咿呀哟! </div> <button onclick="Demo()">按钮</button> </body> </html>
页面效果:
相关文章推荐
- JavaScript学习笔记之通过DOM操作html
- JQuery学习笔记三:基础DOM和CSS操作
- JavaScript学习笔记之CSS-DOM
- javascript对文档对象模型DOM的基本操作学习笔记
- jQuery学习笔记之五----基础DOM和CSS操作
- jQuery学习笔记之基础DOM和CSS操作
- 【知了堂学习笔记】_JavaScript之DOM操作案例(ATM机)
- javascript学习笔记(九):DOM操作HTML的各种方法使用
- JavaScript Dom 编程艺术学习笔记之DOM操作
- JavaScript学习笔记之CSS-DOM
- javascript 学习笔记(一)DOM基本操作
- JQuery学习笔记-JQuery的CSS DOM操作
- 【知了堂学习笔记】_JavaScript之DOM操作(英语在线翻译)
- javaScript操作DOM学习笔记
- JavaScript学习笔记 - 入门篇(3)- DOM操作
- JavaScript DOM学习笔记5――创建和操作节点
- JQuery学习笔记-JQuery的CSS DOM操作
- 【知了堂学习笔记】_JavaScript之DOM操作案例(验证码)
- javascript学习笔记(四):DOM操作HTML
- jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS