オリジナルJS要素にclass属性を追加

9577 ワード

次の3つの簡単な文があります.

　　　　document.getElementsByTagName('body')[0].className = 'snow-container'; // 
        document.getElementsByTagName('body')[0].className += 'snow-container'; // 
        document.getElementsByTagName('body')[0].classList.add("snow-container"); //

テスト1:

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            .snow-container {
                background-color: red;
            }
        style>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementsByTagName('body')[0].className = 'snow-container'; // 
                document.getElementsByTagName('body')[0].className += 'snow-container'; // 
                document.getElementsByTagName('body')[0].classList.add("snow-container"); // 
            }
        script>
    head>

    <body class="test">

    body>

html>

テスト2:

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            .snow-container {
                background-color: red;
            }
        style>
        
    head>

    <body class="test">

    body>
    <script type="text/javascript">
        document.getElementsByTagName('body')[0].className = 'snow-container'; // 
        document.getElementsByTagName('body')[0].className += 'snow-container'; // 
        document.getElementsByTagName('body')[0].classList.add("snow-container"); // 
    script>

html>

まとめ：JSはbodyとheadの違い

bodyとheadに置くのは、ドキュメントの解析時間の違いにすぎません.ブラウザ解析htmlは上から下までです.Javascriptをheadに入れると先に解析されますが、このときbodyはまだ解析されていないので$(#btn)は空の値を返します.Javascriptをheadに置くと、通常はリスニングをバインドし、すべてのhtmlドキュメントが解析された後、コードを実行します.
$(document).ready(function()/ここに実行コードを入れる})一般的にはjavascriptをjsファイルに単独で入れ、headのリンクを通じてcssはを通じて置くのが望ましい.このような目的は、コンテンツ-スタイル-論理を分離し、後でよりよく維持できるようにすることである.

2022年03月22日(火)

独自のライブラリを作成