属性操作

作者: Clayten | 来源:发表于2018-04-19 17:50 被阅读0次

06_jQuery(三)
小试牛刀——JavaScript基础部分
五、jQuery操作css、位置属性和尺寸属性
js操作属性
JS操作属性、JS换肤、JS操作style属性、JS操作clas
3初识JavaScript
「DOM 编程」属性操作
操作元素熟属性
jQuery 属性、样式操作
jquery属性操作、特殊效果、动画、循环

特殊的属性操作，如class，for等

操作class：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 200px;
            border: 1px solid gray;
        }
        .two {
            background: red;
        }
    </style>
</head>
<body>
    <div id="one" class="box"></div>
    <form action="">
        <label for="uPwd">姓名：</label><input type="text" name="" id="uName">
        <label for="uPwd">密码：</label><input type="password" name="" id="uPwd">
    </form>
    <script type="text/javascript">
        var box = document.getElementById("one");
        box.className = "two";
    </script>
</body>
</html>

操作class时不能直接使用class要使用className进行操作

操作for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 200px;
            border: 1px solid gray;
        }
        .two {
            background: red;
        }
    </style>
</head>
<body>
    <div id="one" class="box"></div>
    <form action="">
        <label for="uPwd" id="lab">姓名：</label><input type="text" name="" id="uName">
        <label for="uPwd">密码：</label><input type="password" name="" id="uPwd">
    </form>
    <script type="text/javascript">
        var box = document.getElementById("one");
        box.className = "two";
        var ol = document.getElementById("lab");
        ol.htmlFor = "uName";
    </script>
</body>
</html>