通过js给div元素设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.current {
width: 200px;
height: 200px;
background: green;
}
.mt10 {
margin-top: 10px;
}
</style>
</head>
<body>
<div style="background: pink" id="odiv"></div>
<script type="text/javascript">
// 通过js给div元素设置样式
var oDiv = document.querySelector("div");
//1.分别添加
// oDiv.style.width = "200px";
// oDiv.style.height = "200px";
// oDiv.style.background = "red";
//2.通过cssText集体添加
//oDiv.style.cssText = "width:200px;height:200px;background:red";
//3.元素.className 表示类样式 通过添加类名来改变
oDiv.className = "current mt10";
//由于原生的js来通过id获取元素太繁琐，封装一个函数通过id来获取到相关元素
function $(id){
return document.getElementById(id);
}
console.log($('odiv'));
</script>
</body>
</html>
原生js的select的onchange事件来改变p元素文本的color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="onesel" name="onesel">
<option value="">请选择字体的颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<p>这是一个别样的时代</p>
</body>
<script type="text/javascript">
//通过onchange事件来改变p元素文本的color
var sel = document.getElementById('onesel');
var op = document.getElementsByTagName('p')[0];
sel.onchange = function(){
op.style.color = this.value;
}
</script>
</html>
全选和反选的一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="checkAll"/>全选<br>
<input type="checkbox" name="fx"/>反选<br>
<input type="checkbox" name="cl"/>JS
<input type="checkbox" name="cl"/>JAVA
<input type="checkbox" name="cl"/>c#
<input type="checkbox" name="cl"/>vb
</body>
<script type="text/javascript">
var chooseall = document.getElementsByName('checkAll')[0];
var choosewrong = document.getElementsByName('fx')[0];
var oinputs = document.getElementsByName('cl');
chooseall.onclick = function(){
choosewrong.checked = '';
for(var i = 0;i<oinputs.length;i++){
oinputs[i].checked = 'checked';
}
}
choosewrong.onclick = function(){
chooseall.checked = '';
for(var i = 0;i<oinputs.length;i++){
oinputs[i].checked = !oinputs[i].checked;
}
}
//为剩余的所有复选框添加事件，每次点击时统计被选中的元素，小于可选择的复选框的个数那么就将全选的状态改变
for(var i = 0;i<oinputs.length;i++){
oinputs[i].onclick = function(){
var count = 0;
for(var j = 0;j<oinputs.length;j++){
if(oinputs[j].checked){
count++
}
if(count == oinputs.length){
chooseall.checked = 'checked';
}else{
chooseall.checked = ''
}
//如果最后一个都没有选中，那么将反选的状态也进行改变
if(count = '0'){
choosewrong.checked = '';
}
}
}
}
</script>
</html>
通过焦点与失去焦来完成的一个简单的表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="opt">
<span id="ospan"></span>
</body>
<script type="text/javascript">
//通过焦点与失去焦来完成的一个简单的表单验证
var oinput = document.getElementById('opt');
var ospan = document.getElementById('ospan');
oinput.onfocus = function(){
this.value = '';
}
oinput.onblur = function(){
var oval = this.value.trim();
if(oval == ''){
ospan.innerText = "不能为空";
ospan.style.color = 'red';
return;
}
if(isNaN(oval)){
ospan.innerText = "必须为数字";
ospan.style.color = 'red';
return;
}
if(oval.length<6){
ospan.innerText = '必须大于6位';
ospan.style.color = 'red';
return
}
ospan.innerText = '输入合法';
ospan.style.color = 'green';
}
</script>
</html>
通过js来控制元素的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: pink;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div id="odiv" class = "hide"></div>
</body>
<script type="text/javascript">
// 点击隐藏按钮 div消失 同时按钮隐藏变成显示文字
// 点击显示按钮 div显示 同时按钮显示变成隐藏文字
var btn = document.getElementById('btn');
var odiv = document.getElementById('odiv');
btn.onclick = function(){
var btntext = btn.innerText;
if(btntext === '显示'){
odiv.classList.remove('hide');//原生的js为元素移除一个类名
btn.innerText = '隐藏'
}else{
btn.innerText = '显示'
odiv.classList.add('hide');//原生的js为元素添加一个类名
}
}
</script>
</html>
网友评论