zoukankan      html  css  js  c++  java
  • JavaScript与页面交互

    JavaScript与页面交互联系首先要与html标签建立联系,下面来看几种关联标签的方法。

    1.通过标签id来关联标签:

    <body>
    <h2 id="hh">数据类型</h2>
    </body>
    
    <script>
        let h2=document.getElementById('hh');
        console.log(h2);
       console.log(hh);  id是标签的唯一标识 所以也可以通过id直接拿到标签
    </script>

    ==>
    <h2 id="hh">
    <h2 id="hh">

    2.通过标签类来关联标签:

    <body>
    <h3 class="hh">wozhuini </h3>
    <h3 class="hh">savjsvb</h3>
    
    </body>
    
    <script>
        let h3=document.getElementsByClassName('hh');
        console.log(h3)
        console.log(h3[0]);   拿到多个标签的情况下可以通过索引取值拿到想要的标签
    </script>
    
    ==>
    HTMLCollection [ h3.hh, h3.hh]
    <h3 class="hh">

    3.同css选择器选定标签:

    <body>
    <h2 id="hh">数据类型</h2>
    <h3 class="hh3">wozhuini </h3>
    <h3 class="hh3">savjsvb</h3>
    
    </body>
    <script>
    h1=document.querySelector('body h2#hh');
    //查找body标签下id为hh的h2标签 console.log(h1);
    h2
    =document.querySelector('#hh `.hh3 ');
    //查找id为hh标签的兄弟标签中类名为hh3的标签 querySelector只找一个 console.log(h2);
    h3
    =document.querySelector('#hh` .hh3');
    querySelector查找符合要求的所有标签 console.log(h3);

    h4=document.querySelector('.hh3:nth-of-type(2))
    //同样可以通过id、class或标签来定位一个或多个标签
    </script>

    通过上面的方法我们可以找到想要的某个标签,通过这些标签可以去获得、修改标签的样式、内容。属性等。

    获得样式、内容、标签

    <body>
    <h2 id="hh">数据类型</h2>
    <h3 class="hh3">wozhuini </h3>
    <h3 class="hh3">savjsvb</h3>
    
    </body>
    
    <script>
    let h1=document.querySelector('#hh');
    let fontsize=h1.style.fontsize console.log(fontsize);
    let backgroundColor=getComputedStyle(h1,null).backgroundColor;
    getComputedStyle(ele_name,伪类选择器通常用null填充)能获得所有样式内联外联都可以 console.log(backgroundColor);
    </script>

    修改样式、内容、标签

    <body>
    <h2 id="hh">数据类型</h2>
    <h3 class="hh3">wozhuini </h3>
    <h3 class="hh3">savjsvb</h3>
    
    </body>
    
    <script>
        let h1=document.querySelector('h2');
        h1.style.color='red';
        h1.style.borderRadius='50%'
       //js可以直接改变样式 但是修改的只能是行间式
      h1.innerText='123456'      直接修改标签内容
      h1.innerHTML='<i>123456</i>'  修改标签
      
    </script>
  • 相关阅读:
    lamp一键安装
    mysql忘记密码
    lamp搭建
    进程与线程的一个简单解释
    使用jmeter进行api接口压力测试(转自某位大佬,感谢)
    cookie,session的区别
    Pycharm2019最新激活注册码(亲测有效)
    安装jmeter
    php环境搭建(需编译安装)
    (转载某位大神的,谢谢啦)listener.ora、tnsnames.ora和sqlnet.ora这3个文件的关系和作用
  • 原文地址:https://www.cnblogs.com/duGD/p/11135135.html
Copyright © 2011-2022 走看看