相关知识: JavaScript
相关知识: JavaScript
JavaScript是一种编程语言,它被广泛用来实现web站点和应用中的交互效果。
JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式。
有三种方法可以实现这样的效果:
- 控制样式表—可以添加、删除、修改样式表。
- 控制样式规则—可以添加、删除、修改样式规则。
- 控制DOM中的单个元素—可以不依赖样式表来修改元素样式。
要了解 JavaScript的更多细节,可以到这个wiki JavaScript 。 |
范例: 一个JavaScript的实例
新建一个doc5.html的页面,把下面的代码复制粘贴进入,注意要保证保存了所有的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>Mozilla CSS Getting Started - JavaScript demonstration</title> <link rel= "stylesheet" type= "text/css" href= "style5.css" /> <script type= "text/javascript" src= "script5.js" ></script> </head> <body> <h1>JavaScript sample</h1> <div id= "square" ></div> <button>Click Me</button> </body> </html> |
新建一个CSS文件style5.css
,复制粘贴下面的样式代码到文件中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #square { width: 20em; height: 20em; border: 2px inset gray; margin-bottom: 1em; } button { padding: .5em 2em; } |
新建一个JavaScript文件script5.js
,复制粘贴下面的代码到文件中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // JavaScript demonstration var changeBg = function (event) { console.log( "method called" ); var me = event.target , square = document.getElementById( "square" ); square.style.backgroundColor = "#ffaa44" ; me.setAttribute( "disabled" , "disabled" ); setTimeout( function () { clearDemo(me) }, 2000); } function clearDemo(button) { var square = document.getElementById( "square" ); square.style.backgroundColor = "transparent" ; button.removeAttribute( "disabled" ); } var button = document.querySelector( "button" ); button.addEventListener( "click" , changeBg); console.log(button); |
用浏览器打开HTML文件并点击按钮。
这里有在线的示例:Here is the Live Example
|
|
重要提示 :
- HTML文档中外链了CSS文件和JavaScript文件。
- 脚本直接修改了DOM元素的样式,通过修改属性值来改变按钮的样式。
- 在JavaScript中
document.getElementById("square")
在功能上同 CSS 选择器#square的功能是类似的。
- 在 JavaScript代码中,
backgroundColor
对应于CSS 属性background-color
。因为JavaScript中不允许在命名中出现中划线,所以采用了驼峰式,的写法来做替代。 - 浏览器针对button有内置的CSS规则
button[disabled="true"]
,这会导致按钮在不可点击状态下的显示样式跟预期有出入。
修改脚本代码实现如下效果:当颜色改变的时候让方块跳至右侧20em的距离,然后再恢复到原来的位置。 |
这里有一个解决方案示例:See a solution to this challenge.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步