JavaScript之HTML与CSS属性操作

时间:2019-03-19
本文章向大家介绍JavaScript之HTML与CSS属性操作,主要包括JavaScript之HTML与CSS属性操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

A.HTML

1.获取静态HTML属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="btn" class="myBtn" type="button" value="获取" />
</body>
<script>
    function func() {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            alert(oBtn.id)
        }
    }
    func()
</script>
</html>
2.获取动态HTML属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" checked/>香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" checked/>西瓜</label>
    </div>
    <input id="btn" type="button" value="获取" />
</body>
<script>
    function func() {
        var oBtn = document.getElementById("btn");
        var oFruit = document.getElementsByName("fruit");
        oBtn.onclick = function () {
            for (var i=0;i<oFruit.length;i++) {
                if (oFruit[i].checked) {
                    alert(oFruit[i].value);
                }
            }
        };
    }
    func()
</script>
</html>

效果如图:

2.1 获取文本框的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" class="myBtn" type="button" value="获取" />
</body>
<script>
    function func() {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            var oTxt = document.getElementById("txt");
            // 注意里用的是value属性
            alert(oTxt.value)
        }
    }
    func()
</script>
</html>

对于其他的表单元素同样都是通过value属性来获取内容的。

3. 设置HTML属性值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="btn" type="button" value="修改" />
</body>
<script>
    function func() {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            oBtn.value = "button";
        };
    }
    func()
</script>
</html>

对于对象方法,一共有四种:getAttribute(),setAttribute(), removeAttribute(),hasAttribute()。这个看字面意思非常好理解,类似obj.getAttribute(“attr”)等同于obj.attr。不同的是,对于自定义的属性的获取修改删除等,只能使用前面的方法。

B.CSS属性操作

1.获取CSS属性值
getComputedStyle(obj).attr

如果CSS是font-size,attr就写成fontSize,没错就是驼峰体。注意不要使用obj.style.attr。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <input id="btn" type="button" value="获取颜色" />
    <div id="box"></div>
</body>
<script>
    function func() {
        var oBtn = document.getElementById("btn");
        var oBox = document.getElementById("box");
        oBtn.onclick = function () {
            alert(getComputedStyle(oBox).backgroundColor);
        };
    }
    func()
</script>
</html>
2.设置CSS属性值

最简单的就是使用style对象:

obj.style.attr = “值”,attr和“值”均使用驼峰体。

也可以是cssText属性。

obj.style.cssText = “值”,值用正常的css样式。