jQuery实现随意改变div任意属性的名称和值(部分原生js实现)

用原生js和jQuery实现随意改变div属性和重置,在输入框输入“属性名”及“属性值”，点击确定按钮查看效果，感兴趣的你可不要错过了哈

一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：
复制代码 代码如下:

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;}

属性名：

属性值：

确定重置

在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。

$(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");
})
})

属性名：

属性值：

确定重置

在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。

以上就是jQuery实现随意改变div任意属性的名称和值(部分原生js实现)的详细内容，更多请关注本站其它相关文章！