Introduction to Web API and DOM object

catalogue

1, Exclusive thinking and getting, setting and removing properties

1. Exclusivity

2. Get the value of the attribute

3. Set the value of the attribute

4. Remove attributes

5. Case: table interlaced color change (get the style by changing the value of this.className)

  6. Cases of exclusive thinking

  7.tab column switching case (setting attribute and obtaining attribute usage)

1, Exclusive thinking and getting, setting and removing properties

1. Exclusivity

If there is the same group of elements, we need to use the exclusive idea algorithm of loop if we want an element to implement a certain style:

1. Clear all elements

2. Set style for current element

(there will be case exercises later)  

2. Get the value of the attribute

  1. element. Attribute     Get property value

2. element.getAttribute('attribute ');

<div id="emo"  index="1"> </div>


//1. element get attribute value

var div = document.querySelector('div');

console.log(div.id);
//------------------------------------------------------

//2. element.getAttribute('attribute ');

var div = document.querySelector('div');

console.log(div.getAttribute('id'));

console.log(div.getAttribute('index'));

difference:
1. Get the built-in attribute value (the attribute of the element itself)
2. Element.getattribute (attribute "); it mainly obtains custom attributes (standard)       We programmer defined properties
 

3. Set the value of the attribute

  1. element. Attribute = 'value'     Set built-in attribute values

  2. element.setAttribute('attribute ',' value ');

difference:
1. element. Attribute   Set built-in attribute values
  (to change the attribute value of class, the    element.className = ' ')

2. element.setAttribute('attribute ',' value ');   It mainly sets custom attributes (standard). For modifying the attribute of class, that is, class, there is no need to add Name after it  

4. Remove attributes

  element.removeAttribute('attribute ');  

5. Case: table interlaced color change (get the style by changing the value of this.className)

  Realize that the background color changes on which line the mouse passes  

 <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            width: 866px;
            margin: 100px auto;
        }

        table thead {
            height: 40px;
            background-color: #7fc8ed;
        }

        table tbody {
            color: #565ce6;
            font-size: 14px;
        }

        table tbody tr th {
            height: 40px;
            border-bottom: 1px solid #ccc;
            
        }

        .after {
            background-color: rgb(185, 223, 238);
        }
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>code</th>
                <th>name</th>
                <th>Latest published net worth</th>
                <th>Accumulated Net </th>
                <th>Net unit value before</th>
                <th>Net worth growth rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
        </tbody>
    </table>
    <script>
        var bod = document.querySelector('tbody').querySelectorAll('tr');
        for(var i = 0; i < bod.length; i++) {
            bod[i].onmouseover = function() {
                this.className = 'after';
            }
            bod[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

  6. Cases of exclusive thinking

The background color of which button is clicked will become pink, but others will not change color  

Exclusive thought: before you click a button, use the for loop to make the background color of all buttons empty, and then change the background color of the clicked button to pink at the end of the loop  

 <title>Document</title>
</head>
<body>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for(var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                for(  i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

  7.tab column switching case (setting attribute and obtaining attribute usage)

Display different content by clicking on different titles

  <title>Document</title>
    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 800px;
            margin: 100px auto;
        }
        
        ul {
            display: flex;
            height: 40px;
            align-items: center;
            border: 1px solid #e6e7e6;
            background-color: #eff0ef;
        }

        ul li {
            padding: 0 15px;
            height: 40px;
            line-height: 40px;
        }

        .current {
            background-color: #d72720;
            color: white;
        }

        ul li:hover {
            cursor: pointer;
        }
 
        .item {
            display: none;
        }

        .tbody {
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head">
            <ul>
                <li class="current">Product introduction</li>
                <li>Specification and packaging</li>
                <li>After sales guarantee</li>
                <li>Commodity evaluation (50000)</li>
                <li>Mobile community</li>
            </ul>
        </div>
        <div class="tbody">
            <div class="item" style="display:block">
                Content of product introduction module
            </div>
            <div class="item">
                Specification and packaging module content
            </div>
            <div class="item">
                Content of after sales guarantee module
            </div>
            <div class="item">
                Content of commodity evaluation (50000) module
            </div>
            <div class="item">
                Mobile community module content
            </div>
        </div>
    </div>
    <script>
        var li = document.querySelector('.head').querySelectorAll('li');
        var item = document.querySelector('.tbody').querySelectorAll('.item');
        for(var i = 0; i < li.length; i++) {
            li[i].setAttribute('data-index',i);
            li[i].onclick = function() {
                for(var i = 0; i < li.length; i++) {
                    li[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('data-index');
                for(var i = 0; i < item.length; i++) {
                    item[i].style.display = 'none';
                }
                item[index].style.display = 'block';
            }
        }
    </script>
</body>

Tags: Front-end html css

Posted on Tue, 21 Sep 2021 22:55:36 -0400 by GBS