js实现页面跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="fn()">百度</button>
<script>
function fn(){
window.open('http://www.baidu.com')
}
</script>
</body>
</html>
自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li index="1">首页</li>
<li index="2" class="ac">列表</li>
<li index="3">详情</li>
<li index="4">关于</li>
</ul>
<script>
var ac = document.querySelector('.ac')
var index = ac.getAttribute('index')
console.log(index)
ac.setAttribute('data-id',true)
ac.removeAttribute('index')
</script>
</body>
</html>
id和class的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="fn()">按钮</button>
<div id="box" class="box section">box</div>
<script>
var div = document.querySelector('#box')
function fn(){
div.className += ' box2'
div.classList.add('ac')
div.classList.remove('section')
console.log(div.className)
console.log(div.classList)
console.log(div.classList[0])
console.log(div.classList[1])
}
</script>
</body>
</html>
innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="fn()">按钮</button>
<div id="box" class="box section">box</div>
<script>
var div = document.querySelector('#box')
function fn(){
div.innerText = '<b>box3</b>'
}
</script>
</body>
</html>
