js 换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js换肤</title>
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1">
<script type="text/javascript">
window.onload = function(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
alert(oLink.id);
}
</script>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>
js操作 style、样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作style属性</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
/*style属性中的样式属性，没有"-"号的，写法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
例如：font-size属性要写为fontSize
*/
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
js操作class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作class</title>
<style type="text/css">
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
// 由于class是js中的保留关键字，所以设置class属性时，要写为className
oDiv.className = 'box02';
}
</script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>
js中括号操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中括号操作属性</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通过[]操作属性可以写变量 */
oDiv['style'][attr] = 'red';
/* 通过innerHTML可以读写元素包括的内容 */
alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”
var oDiv2 = document.getElementById('div2');
// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签
/*
document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
*/
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div id="div2"></div>
</body>
</html>
js 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
<script type="text/javascript">
function aa(){
alert('hello!');
}
/*
//直接调用
aa();
*/
</script>m
</head>
<body>
<input type="button" name="" value="弹框" onclick="aa()" />
</body>
</html>
js可控制换肤
<script type="text/javascript">
window.onload = function(){
/* 提取行间事件 */
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = skin01;//这里不能写skin01()，这样写就马上执行了
oBtn02.onclick = skin02;
}
function skin01(){
var oLink = document.getElementById('link1');
oLink.href = "css/1.css";
}
function skin02(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
}
</script>
</head>
<body>
<!--
行间调用函数
<input type="button" name="" value="皮肤01" onclick="skin01()" />
<input type="button" name="" value="皮肤02" onclick="skin02()" /> -->
<input type="button" name="" value="皮肤01" id="btn01" />
<input type="button" name="" value="皮肤02" id="btn02" />
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>