zoukankan      html  css  js  c++  java
  • JS基础 属性的 DOM 操作

    1、属性

       是对象的性质与对象之间关系的统称。HTML中标签可以拥有属性,属性为 HTML 元素提供附加信。

    属性总是以名称/值对的形式出现,比如:name="value"。

    属性值始终被包括在引号内。双引号是最常用的,在某些个别的情况下,比如属性值本身就含有双引号,必须使用单引号,

    属性总是在 HTML 元素的开始标签中规定。

    2、属性实例

     HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

     < a href="http://www.baidu.com"> a </a>

    <h1> 定义标题的开始。

    <h1 align="center"> 拥有关于对齐方式的附加信息。

    <body> 定义 HTML 文档的主体。

    <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

                   

    <table> 定义 HTML 表格。

     <table border="1"> 拥有关于表格边框的附加信息。

    3、对属性的操作

    (1)通过定位找到该元素存于变量中

                   var  a =  document.getElementById("id")

    (2)对该元素的属性进行操作
        a.setAttribute( “ 属性名”,“属性值” )   // 添加更改属性
        a.getAttribute( " 属性名 " );       // 获取属性的值
        a.removeAttribute( " 属性名 " );     //移除属性
     
      最新的属性会覆盖原来的属性不会出现2个相同的属性, 直接用   属性名=属性值  就能给属性修改,给属性赋值
     
    上代码示例
      例1、建2个按钮,点击第一个按钮,按钮本身变为不可用,点击第二个按钮第一个按钮变为可用
    <head>
        <title></title>
    </head>
    <body> 
        <input type ="button" value ="第一个按钮" class="c1" /> 
        <input type ="button" value ="第二个按钮" class="c1" /> 
    </body>
    </html>
    <script type="text/javascript"> 
        var a = document.getElementsByClassName("c1")
        a[0].onclick = function () { 
            a[0].setAttribute("disabled","disabled")    // disable="disable"  不可用
        } 
        a[1].onclick = function () {
            a[0].removeAttribute("disabled")
        } 
    </script>

    例 2、 做一个问题,输入答案如果正确弹出正确,错误弹出错误

    <head>
        <title></title>
    </head>
    <body> 
        5+5=
        <input type ="text"  class="c1"/>
        <input type ="button" value ="验证" " da="10" class="c1"/> 
    </body>
    </html> 
    <script type ="text/javascript"> 
        var a = document.getElementsByClassName("c1"); 
        a[1].onclick = function () {
            var c = a[0].value;
            var d = a[1].getAttribute("da"); 
            if (d == c) 
                alert("正确");     
            else 
                alert("笨蛋!!!");     
        } 
    </script>

    效果

       

    例3、建按钮与有背景色的div,点击按钮背景色改变
    <head>
        <title></title>
        <style type="text/css">
            .div {
                 100px;
                height: 100px;
                background-color: red;
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body> 
        <input type="button" value="验证" id="btn1" /><br /> 
        <div class="div" aa="1"></div>
        <div class="div" aa="1"></div>
        <div class="div" aa="0"></div>
        <div class="div" aa="0"></div>
        <div class="div"></div>
        <div class="div"></div> 
    </body>
    </html> 
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var oDivs = document.getElementsByClassName('div'); 
            for (var i = 0; i < oDivs.length; i++) {
                if (oDivs[i].getAttribute('aa') == '1')
                    oDivs[i].style.backgroundColor = "blue";
                if (oDivs[i].getAttribute('aa') == '0')
                    oDivs[i].style.backgroundColor = "green";
            }
        } 
    </script>

    效果图

      
     
  • 相关阅读:
    洛谷P2437 蜜蜂路线
    树莓派python3安装face_recognition和opencv2
    记事本
    python中退出多层循环的方法
    openwrt 不死uboot Breed大全
    python通过http下载文件的方法
    Python37 GUI Qt5安装与使用
    openwrt Python3.6通过自带的urllib通过get或post方法请求url
    openwrt 版本源码地址
    echo追加和覆盖
  • 原文地址:https://www.cnblogs.com/Tanghongchang/p/6653931.html
Copyright © 2011-2022 走看看