- 1 JS 中修改元素的类名: 可以通过
className修改,不能使用class
function toRed() {
var tobox = document.getElementById('box1');
tobox.className = 'tmpBox';
}
- 2 函数传参
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-函数传参数</title>
<style>
#div1{width: 200px; height: 200px; border: 1px solid #000;}
</style>
<script>
function setColor(color) {
var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = color;
}
</script>
</head>
<body>
<input type="button" value="变绿" onclick="setColor('green')">
<input type="button" value="变黄" onclick="setColor('yellow')">
<input type="button" value="变黑" onclick="setColor('black')">
<div id="div1"></div>
</body>
</html>
函数传参:颜色
3修改属性的第二种方法:(<a>要修改的属性不固定时使用</a>)
可以通过 oDiv.style[属性名字] = value;来动态修改属性和值
//括号里放的是变量
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
}
</style>
<script>
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}
</script>
</head>
<body>
<input type="button" value="变高" onclick="setStyle('height','200px')">
<input type="button" value="变宽" onclick="setStyle('width','200px')">
<input type="button" value="变红" onclick="setStyle('background','red')">
<div id="div1"></div>
</body>
</html>
修改属性的第二种方法
4.style和className的区别
元素.style.属性 = xxx;是修改的行间(行内)样式,它的优先级比较高 !!! 例如:oDiv.style.backgroundColor = 'red';
className : 可以通过指定的类名,去找到对应的样式;
但是如果使用了style之后,再使用className指定样式,就会没有效果!!!!
注意:要么都是用style设置样式,要么单独使用className指定样式,不可混合使用,会有未知的错误发生!
5.提取行间事件
window.onload 页面加载完成时才执行
行为、样式、结构三者分离: JS CSS HTML 分离
- 提取事件
- 为元素添加事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-提取行间事件</title>
<script>
//window.onload 页面加载完成时才执行
window.onload = function () {
var oBtn = document.getElementById('btn1');
//给元素添加事件
oBtn.onclick = function () { //匿名函数
alert('我是打酱油的');
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>
6.JS从父元素获取子元素
从下面代码中获取到input
<div id="box1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
</div>
放下如下:
window.onload =function ()
{
var oDiv = document.getElementById('box1'); //现获取父元素div
var inputs = oDiv.getElementsByTagName('input'); //再通过div获取到里面所有的input
}
7. innerHTML
用于设置容器标签的内容,可以是文字,也可以是 HTML(标签)。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-innerHTML</title>
<style>
.content{
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
<script>
window.onload = function () {
var oText = document.getElementById('textField');
var oBtn = document.getElementById('button');
var oContent = document.getElementById('div-content');
oBtn.onclick = function () {
oContent.innerHTML = oText.value;//可以往里放文字,标签等
}
}
</script>
</head>
<body>
<input type="text" id="textField">
<input type="button" value="点击" id="button">
<div class="content" id="div-content"></div>
</body>
</html>
innerHTML:把输入框中的内容显示在下面的div中
8.字符串的拼接:
var str = '我叫小明'+12+'岁'+168+'2017'; >>> 结果:我叫小明12岁1682017
var num = '9+6等于'+(9+6); >>> 结果: 9 + 6 等于 15
网友评论