JS控制样式和表单

最新推荐文章于 2024-04-18 18:07:00 发布

Munger6

最新推荐文章于 2024-04-18 18:07:00 发布

阅读量1.4k

点赞数

分类专栏： JAVAScript

本文链接：https://blog.csdn.net/Munger6/article/details/53511552

版权

JAVAScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

控制样式

（一）、内联样式

获取样式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .p1{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="div1" style="width:100px; height: 100px;background-color: pink">

    </div>
    <p class="p1"style="font-weight: 900">
        土豆、地瓜、马铃薯、番茄、西红柿
    </p>
</body>

js中获取的odiv.style属性按照JSON按照键值对的方式存储；JSON 是存储和交换文本信息的语法。

var odiv = document.getElementsByClassName("div1")[0];
  var str = odiv.style;

str[1]获取的是键的名字；

console.info(str[1]);

获取样式的宽度：odiv.style.width;

console.info(str.width);

当遇到连字符的时候将“-”去掉首字母换成大写； backgroundColor

console.info(str.backgroundColor);

设置样式:

str.backgroundColor = "orange";
str.width = "200px";
 /*str.border ="1px solid red";*/
str.borderLeftColor = "red";
str.borderLeftWidth = "10px";
str.borderLeftStyle = "dotted";

设置样式,将把原来的值覆盖掉

获取属性值

this.style.getPropertyValue('width')

删除属性

要删除的名字是CSS对应的名字；
this.style.removeProperty('background-color')

设置属性

要设置的属性名字是CSS对应的名字；
this.style.setProperty("background-color","10px");

获取内部样式表

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .p1{
            color: red;
            font-size: 20px;
        }

        span{
            font-size: 20px;
        }
    </style>

    <style>
        span{
            color: blue;
        }
    </style>
</head>
<body>
<p class="p1"style="font-weight: 900">
    土豆、地瓜、马铃薯、番茄、西红柿
</p>

<span>span</span>

获取内部样式表

获取当前文档一共有多少套样式表

var styleType = document.styleSheets;
console.info(styleType);

获取样式表到集合中所有的样式信息

var csslist = styleType[0].cssRules;
        console.info(csslist);

获取到Css样式

console.info(csslist[0].style.fontSize);

设置CSS样式

csslist[0].style.fontSize = "30px";

兼容性问题：IE不支持cssRules		要换成rules；
外部样式表-和内部外部样式表一样的操作；

获取外部样式表

外部样式表获取到的信息和内部样式表有样式形式的区别；
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="../css/styles.css" type="text/css"/>
    <link rel="stylesheet" href="../css/style.css" type="text/css"/>

    <style>

    </style>
</head>
<body>
    <p>黄焖鸡吧，箱子面，面霸，冒菜，自由安排</p>


    <script>
        var styletyle = document.styleSheets;
        console.info(styletyle);

        var csslist = styletyle[0].cssRules;
        console.info(csslist);
    </script>
</body>

控制表单

作用：将数据获取后提交给数据库；并对数据进行操作

<form id="form1" name="form1"  action="" method = 'post'>   <!--action服务器地址-->
    <input type="text" name = "username" placeholder="用户名" />
    <input type="password" name="pwd"/>
    <input type="radio" name="sex" value="男" checked/>男
    <input type="radio" name="sex" value="女"  />女

    <input type="checkbox" name="aihao" value="电影" checked/>电影
    <input type="checkbox" name="aihao" value="音乐" checked/>音乐
    <input type="checkbox" name="aihao" value="体育"/>体育

    <select name="city">
        <option value="">请选择一个城市</option>
        <option value="北京">北京1</option>
        <option value="上海" selected>上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>

    <input type="button" value="按钮" id="btn" />
    <input type="submit" value="提交" />
</form>

<form action="">

</form>

获取表单

方式一：var oform = document.getElementById("form1");
  方式二：var formarr = document.forms;
  //获取所有form对象之后找到对应的表单内容；
   console.info(formarr[0]);//这是一个键值对的键值；
    console.info(formarr["form1"]); //默认按照name属性找，name属性不存在再按照id找form。

获取表单的值

/*通过name属性找到元素，在通过value属性找到值*/
        var inp = formarr[0].username;
        console.info(inp.value);
        var opwd = formarr[0].pwd;
        console.info(opwd.value)
        
 /*通过表单方式获取到内容*/
    var inpValue = document.getElementsByName("username")[0].value;
    console.info(inpValue);

男女选项框获取按钮值

/*方式一：该选项框name=sex为唯一选择，因此得到的不是数组；可以直接获取value；*/
     var radioarr = oform.sex;
    console.info(radioarr.value);
    
**方式二*：通过name获得集合，然后遍历找到被选中；*
var sexarr = document.getElementsByName("sex");
    for(var i=0;i<sexarr.length;i++){
            if(sexarr[i].checked){
                console.info(sexarr[i].value);
            }
    }

勾选复选框：

var liketype = oform.aihao;
    /*console.info(liketype);
     console.info(liketype.value)
     直接打印为空，因为爱好是多项选择，无法直接获取数组的值；必须遍历打印；
     */
     
    for(var i=0;i<liketype.length;i++){
        if(liketype[i].checked){   //为真表示被选中
            console.info(liketype[i].value);
        }
    }

下拉复选框

参照勾选复选框

Munger6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS控制样式和表单

控制样式（一）、内联样式获取样式head> meta charset="UTF-8"> title>title> style> .p1{ color: red; font-size: 20px; } style>head>body> div class
复制链接

扫一扫