脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js改变div属性style的名称和值

原生js实现改变随意改变div属性style的名称和值的结果

 更新时间：2013年09月26日 17:48:20   作者：  
在本文将为大家介绍下如何用原生js和jQuery实现随意改变div属性，和重置，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：
复制代码 代码如下:

<!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>
您可能感兴趣的文章:

相关文章

  • js获取ip和地区

    js获取ip和地区

    本文主要介绍了js获取ip和地区的方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 小程序拖动区域实现排序效果

    小程序拖动区域实现排序效果

    这篇文章主要为大家详细介绍了小程序拖动区域实现排序效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • javascript计时器编写过程与实现方法

    javascript计时器编写过程与实现方法

    这篇文章主要为大家详细介绍了javascript计时器编写过程与实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 教你如何写出可维护的JS代码

    教你如何写出可维护的JS代码

    在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。
    2021-05-05
  • 利用TypeScript从字符串字面量类型提取参数类型

    利用TypeScript从字符串字面量类型提取参数类型

    这篇文章主要介绍了利用TypeScript从字符串字面量类型提取参数类型，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • 微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解

    微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解

    这篇文章主要介绍了微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js实现京东秒杀倒计时功能

    js实现京东秒杀倒计时功能

    这篇文章主要为大家详细介绍了js实现京东秒杀倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JavaScript中使用typeof运算符需要注意的几个坑

    JavaScript中使用typeof运算符需要注意的几个坑

    这篇文章主要介绍了JavaScript中使用typeof运算符需要注意的几个坑,本文总结了4个使用typeof运算符要注意的问题,需要的朋友可以参考下
    2014-11-11
  • js实现简单拼图小游戏

    js实现简单拼图小游戏

    这篇文章主要为大家详细介绍了js实现简单拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js（jquery）实现无刷新跳转404页面不存在效果

    js（jquery）实现无刷新跳转404页面不存在效果

    有时候我们希望临时让某个分类或者多个文章不能正常访问，手动给html文件改名？或者改后台改程序？太麻烦了。用本文的js代码很容易实现，而且使用得当很隐蔽。这篇文章主要介绍了js（jquery）实现无刷新跳转404页面不存在效果,需要的朋友可以参考下
    2023-04-04

最新评论