search

Home  >  Article  >  Web Front-end  >  Native js and jQuery can change the name and value of div attribute style at will_javascript skills

Native js and jQuery can change the name and value of div attribute style at will_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:33:151287browse

Some simple examples, using native js and jQuery to change div attributes and reset them at will. The code is as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>函数传参，改变Div任意属性的值</title>
<style type="text/css">
body,p{margin:0;padding:0;}
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
#outer{width:300px;margin:0 auto;}
p{margin-bottom:10px;}
button{margin-right:5px;}
label{width:5em;display:inline-block;text-align:right;}
input{padding:3px;font-family:inherit;border:1px solid #ccc;}
#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>函数传参，改变Div任意属性的值</title>
<style type="text/css">
body,p{margin:0;padding:0;}
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
#outer{width:300px;margin:0 auto;}
p{margin-bottom:10px;}
button{margin-right:5px;}
label{width:5em;display:inline-block;text-align:right;}
input{padding:3px;font-family:inherit;border:1px solid #ccc;}
#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
/*var changeSytle = function (elem,name,value){
elem.style[name] = value;
}
window.onload = function (){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementsByTagName("button");
var oInput = document.getElementsByTagName("input");
oBtn[0].onclick = function (){
changeSytle (oDiv,oInput[0].value,oInput[1].value)
} ,
oBtn[1].onclick = function (){
oDiv.removeAttribute("style");
}
} */原生js部分实现


$(function(){
$("button:first").click(function(){
var styleName= $("#outer").find("input:first").val();
var styleVal = $("#outer").find("input:last").val();
$("#div1").css(styleName,styleVal);
})
$("button:last").click(function(){
$("#div1").removeAttr("style");
})
})

</script>

</head>
<body>
<div id="outer">
<p><label>属性名：</label><input type="text" value="background" name="styleName" /></p>
<p><label>属性值：</label><input type="text" value="blue" name="val" /></p>
<p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>

</body>
</html>
$(function(){
$("button:first").click(function(){
var styleName= $("#outer").find("input:first").val();
var styleVal = $("#outer").find("input:last").val();
$("#div1").css(styleName,styleVal);
})
$("button:last").click(function(){
$("#div1").removeAttr("style");
})
})

</script>

</head>
<body>
<div id="outer">
<p><label>属性名：</label><input type="text" value="background" name="styleName" /></p>
<p><label>属性值：</label><input type="text" value="blue" name="val" /></p>
<p><label></label><button>确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>

</body>
</html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of arguments object in Javascript_Basic knowledgeNext article：Detailed explanation of arguments object in Javascript_Basic knowledge

Related articles

See more