Js et jQuery natifs peuvent changer le nom et la valeur du style d'attribut div avec les compétences will

Maison

interface Web

js tutoriel

Js et jQuery natifs peuvent changer le nom et la valeur du style d'attribut div avec les compétences will_javascript

May 16, 2016 pm 04:33 PM

style

Quelques exemples simples, utilisant js et jQuery natifs pour modifier les attributs div et les réinitialiser à volonté. Le code est le suivant :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;函数传参，改变Div任意属性的值&lt;/title&gt;
&lt;style type="text/css"&gt;
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;}
&lt;/style&gt;
&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;函数传参，改变Div任意属性的值&lt;/title&gt;
&lt;style type="text/css"&gt;
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;}
&lt;/style&gt;
&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
/*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");
})
})
 
&lt;/script&gt;
 
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer"&gt;
&lt;p&gt;&lt;label&gt;属性名：&lt;/label&gt;&lt;input type="text" value="background" name="styleName" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;属性值：&lt;/label&gt;&lt;input type="text" value="blue" name="val" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;&lt;/label&gt;&lt;button&gt;确定&lt;/button&gt;&lt;button&gt;重置&lt;/button&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div1"&gt;在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。&lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
$(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");
})
})
 
&lt;/script&gt;
 
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer"&gt;
&lt;p&gt;&lt;label&gt;属性名：&lt;/label&gt;&lt;input type="text" value="background" name="styleName" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;属性值：&lt;/label&gt;&lt;input type="text" value="blue" name="val" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;&lt;/label&gt;&lt;button&gt;确定&lt;/button&gt;&lt;button&gt;重置&lt;/button&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div id="div1"&gt;在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。&lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn