Property Settings and Data Type Mandatory Conversion in JS

1. How to write JS code before

  • window.onload is the loading completion event, which means that the Dom elements in the browser have been rendered.
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //The code is written in front of it.
        window.onload=function(){
            var btn=document.getElementById("btn");
            console.log(btn);
        }       
    </script>
</head>
<body>
<button id="btn">Button</button>
<script>
    //The code is written later.
    var btn=document.getElementById("btn");
    console.log(btn);
</script>
</body>

Note: JS code needs to be written in front of the code by adding window. nl ad=function(), and the rest of the code is the same as that written in the back.

2. Get the value of the attribute

  • Elements can have multiple classes at the same time. When assigning class names to elements in native JS, if assigning directly is equivalent to replacing the original class names, the original class names need to be added, which means that the original old class names are overwritten, followed by new class names.
<button id="btn" class="btnlist">Button</button>
<script>
    var btn=document.getElementById("btn");
    console.log(btn.className);//Get the property name
    btn.className="btnlist btnadd";//Assignment of attributes
</script>

3. Manipulating the text value of the current element

  • You can use innerHTML or innerText
  • If the given value contains labels, the innerHTML browser will automatically parse the labels
<script>
    var btn=document.getElementById("btn");
    btn.innerHTML="<span>I'm the button.</span>";
</script>

  • If the given value contains a label, for innerText, the browser displays the label with the content.
<script>
    var btn=document.getElementById("btn");
    btn.innerText="<span>I'm the button.</span>";
</script>


4. Style-related operations

  • JS operations are all in-line styles of elements
  • JS cannot directly manipulate embedded or external styles

How do I get an embedded style or an external style?

    <style>
        #btn{
            height:100px;
        }
    </style>
</head>
<body>
<button id="btn" style="width:100px; border:1px solid red;">Button</button>
<script>
    var btn=document.getElementById("btn");
    console.log(window.getComputedStyle(btn).height);
</script>
</body>

Note:

  • Using window.getComputedStyle, you can get all the styles of the current element in the browser, including embedded, external, and in-line styles.
  • After JS acquires the external style, if it operates, the external style becomes the in-line style, that is, it can only read but not operate.
    5. Other ways for JS to acquire attributes
<body>
<button id="btn" class="btnlist" style="width:100px; border:1px solid red;">Button</button>
<script>
    console.log(btn.getAttribute("id"));
    console.log(btn.getAttribute("class"));
    console.log(btn.getAttribute("style"));    
</script>
</body>
  • The getAttribute return values are all string types
  • getAttribute can also be used to obtain custom attributes
  • Purpose of custom attributes: simplify development and simplify code logic
  • How to set custom attributes for elements?
    Rule: data - attribute name
<script>
    btn.setAttribute("data-src","./img/1.jpg");//Setting custom properties
    console.log(btn.getAttribute("data-src"));//Get custom properties
</script>

6. Forced Conversion of Data Types in JS

<script>
    var a="123";
    console.log(parseInt(a));
    var b="1.23";
    console.log(parseFloat(b));
    var c="100px";
    console.log(parseInt(c));
    var d="px100";
    console.log(parseInt(d));//NAN
</script>


The result shows that by forcing the data type to be converted, the string behind the number can also be removed, but when the string is in front of the number, it can not be converted and displayed as NAN.

Tags: Attribute REST

Posted on Mon, 12 Aug 2019 21:25:19 -0700 by josephicon