您的位置：首页 > Web前端 > JavaScript

JavaScript 操作页面元素

2016-03-25 20:46 197 查看
1 事件的三要素

事件源：有监听的HTML标签，能响应时间的HTML标签，就是事件源。
事件名：用户的特定行为，比如onclick（单击）
事件的响应：就是一个个function

事件的响应，就是function，那么编程就是编写事件的响应。响应中，最重要的就是想清楚被操作的对象。

下面给大家看一个小例子：单击第一个红色盒子，第二个会变为蓝色。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入门</title>
<style>
div{
width: 100px;
height: 100px;

margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue"
}
</script>
</head>
<body>
<div onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>

通过这个例子，可以看出页面上的两个盒子，点击第一个盒子让第二个盒子变蓝，第一个盒子就是事件源，第二个盒子就是被操作的对象。
其中：
getElementById→通过Id来找到此元素。

现在要让盒子2变蓝，所以要让JavaScript得到盒子2这个元素，得到元素的办法，就需要通过ID来得到它。
注意：
document.getElementById（""）
这种命名法称为驼峰命名法，长的一个单词，是由多个单词组成的，第一个单词的首字母是小写，之后的每一个
单词的首字母都是大写。

综上，点击一个盒子让另外一个盒子变色，点击谁，谁的身上就有onclick；你要操作谁，谁就必须要有id，
通过书写document.getElementByld（""）得到它。

2 语句按行执行。

上述的例子，让我们了解了，事件的三元素以及驼峰命名法。我们可以点击第一个盒子让第二个盒子变蓝。那么，除了让第二个盒子变蓝，它会不会实现让盒子二的高宽产生变化甚至让盒子自身产生变化呢。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入门</title>
<style>
div{
width: 100px;
height: 100px;

margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue";
document.getElementById("box2").style.width="300px";
document.getElementById("box1").style.backgroundColor ="green"

}
</script>
</head>
<body>
<div id="box1" onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>

可以看到，我们不仅可以对盒子二进行多样式改变，盒子一的属性也会变化。这里，这些语句的执行就是按行执行，
找准事件源，用户点击哪个盒子，会有事情发生，这个盒子就是事件源，它身上就有onclick属性。
找准谁是被操作的对象，被操作的对象可能不止一个，并且事件源自己也有可能就是被操作的对象。被操作
的对象身上一定要有Id，这样才能让 document.getElementById("")通过ID来得到这个元素。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航