相关知识: 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

JavaScript demonstration

JavaScript demonstration

重要提示 :
  • 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.

posted @   hephec  阅读(155)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示