码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript 基础元素操作

时间:2017-10-08 21:34:15      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:获取   document   style   就会   页面   func   多个   post   提示   

一、获取元素

1、根据ID找元素

 

document的获取方式:

 

技术分享

 

根据id进行获取元素的方式如下:

 

1
2
var idq = document.getElementById("idq");
alert(idq);

 

  技术分享技术分享

 

 

 

 

 


 

 

 

2、根据class获取元素

 

 

 

1
2
var o_class1 = document.getElementsByClassName("divclass");//(数组)
alert(o_class1);

 

 

 

  技术分享技术分享

 

 

 


 

 

 

3、根据标签获取元素

 

技术分享

 

 

 

4、根据name找元素

 

 

 

    var ss = document.getElementsByName("ys")
    alert(ss[0]);

 

 

 

name是多个也是复数。

 


 

 

 

二、操作元素

 

1、操作内容

 

①非表单元素

 

(1)获取文本:innerText

 

技术分享

 

 

 

(2)设置文本

 

技术分享

 

(3)获取html代码

 

如果想要获取div中,包括span中的所有的代码:

 

技术分享

 

 

 

(4)设置Html代码

 

设置HTML代码,是可以增加动态效果的,输出时页面显示效果。反之,如果使用innerText,就会将效果(<b>加粗</b>)同时也显示出来了。

 

技术分享

 

 

 

②表单元素

 

(1)赋值(设置一个值)

 

技术分享技术分享

 

    var b1 = document.getElementById("b1");
//    alert(value = "请输入内容");  //提示框输出
    b1.value = "请输入内容";   //网页输出

 

技术分享

 

(2)获取值(取值)

 

alert(b.value);

 

2、操作属性

 

①添加属性(设置)

 

//添加属性
    var d1 = document.getElementById("idq");
    d1.setAttribute("style","color: red");

 

技术分享

 

②获取属性

 

getAttribute

 

<div id="idq" iid="我在这里"><span>获取文本</span></div>
<script type="text/javascript">   var d1 = document.getElementById("idq"); alert(d1.getAttribute("iid")); </script>

 

技术分享

 

③移除属性

 

removeAttribute

 

 

 

    var d1 = document.getElementById("idq");
    d1.removeAttribute("iid");

 

3、操作样式

 

①获取样式(只能获取内联样式)

 

JS在获取样式时,只能获取内联的!其他像内嵌和外部的需要使用jquery才可以。

 

    function showa(){
        //1、获取样式
        var d2 = document.getElementById("d2");
        alert(d2.style.color)
    }

 

 

 

技术分享

 

 

 

②设置样式

 

 

 

    function ang(){
        var d2 = document.getElementById("d2");
        //设置样式
        d2.style.backgroundColor = "red"
    }

 

 

 

Javascript 基础元素操作

标签:获取   document   style   就会   页面   func   多个   post   提示   

原文地址:http://www.cnblogs.com/wcl2017/p/7638323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!