简易参数设置案例

简易参数设置案例的两种方法：

设置基础样式如下并通过如下两种方法可以按设置按钮设置不同的样式：

 

第一种javaScript:

思路如下：

1. 声明变量获取到按钮的Id，输出打印。
2. 按钮绑定点击事件。
3. 声明一系列参数变量获取到ID和值。
4. 声明右边盒子的变量获取到ID。
5. 盒子变量名称.样式.属性=（赋值）参数变量。

window.onload=function(){

       var btn=document.getElementById("btnset");

          console.log(btn);

       btn.onclick=function() {

       var txtWidth=document.getElementById("width").value;  

       var txtHeight=document.getElementById("height").value;

       var txtbgColor=document.getElementById("bgColor").value;

       var txtBorder=document.getElementById("border").value;

       var txtborderRadius=document.getElementById("borderRadius").value;

         

       var box=document.getElementById("box");

         box.style.width=txtWidth;

         box.style.height=txtHeight;

         box.style.backgroundColor=txtbgColor;

         box.style.border=txtBorder;

         box.style.borderRadius=txtborderRadius;

     }

 }

 

第二种jQuery:

思路如下：

1. 按钮绑定点击事件。
2. 声明一系列变量，再通过jQ的ID选择器选择到各种元素。
3. css()方法返回或设置匹配的元素的一个或多个样式属性。

 

<script>

        $(function(){

        $("#btnset").click(function(){

            var str1=$("#width").val();

            var str2=$("#height").val();

            var str3=$("#bgColor").val();

            var str4=$("#border").val();

            var str5=$("#borderRadius").val();

            

            $("#box").css({

                "width":str1,

                "height":str2,

                "background-color":str3,

                "border":str4,

                "border-radius":str5,

            })

        })

      });    

</script>

 

 

需要注意：

1.设置元素的css样式的写法：

     单个样式： $(选择器).css("属性","属性值");

     多个样式： $(选择器).css({"属性":"属性值","属性":"属性值",...})

 

2.获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：

    text() - 设置或返回所选元素的文本内容

    html() - 设置或返回所选元素的内容（包括 HTML 标记）

    val() - 设置或返回表单字段的值