首页 > 代码库 > js属性

js属性

2024-09-10 14:42:14   216人阅读

1.属性的操作方式

    * 1、.表示的意思
    *     元素.属性名
    *     如果属性是单一属性，用点操作符是取不到的，而且还会报错
    *     如果想要用点操作符获取带横杠的属性，那首先要把横杠去掉，然后把横杠后面的第一个字母大写
    * 2、[] 表示的意思
    *     如果属性中带横杠，用[]的方式去操作属性
    *     []既可以操作符合变量命名规则的属性，也可以操作不符合变量命名规则的属性

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" id="btn" value="http://www.mamicode.com/按钮"  style="width: 50px; height: 50px; background: #ff0000;font-size: 20px" />
<script>
    var btn=document.getElementById(‘btn‘);
    btn.onclick=function(){
        //alert(btn.type); //button
        //console.log(btn.id);  //btn
        console.log(btn.value);   //按钮

        btn.value=http://www.mamicode.com/‘小按钮‘;   //修改属性>

也就是说，如果属性不是符合命名规则的属性,可以使用[]来获取属性；当然，如果属性符合命名规则，也可以使用[]来获取属性;

 

2.常用属性

2.1 value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*
    *
    * value
    *       表单的值
    *
    * */
    window.onload= function () {
        var btn=document.getElementById(‘btn‘);
        var text=document.getElementById(‘text‘);
        console.log(btn.value);  //按钮
        console.log(text.value);   //这里是一段文字

        text.value=http://www.mamicode.com/‘kaven‘;"button" id="btn" value="http://www.mamicode.com/按钮" />
<input type="text" name="text" id="text" value="http://www.mamicode.com/这里是一段文字" />
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" id="btn" value="http://www.mamicode.com/按钮"  style="width: 50px; height: 50px; background: #ff0000;font-size: 20px" />
<script>
    var btn=document.getElementById(‘btn‘);
    btn.onclick=function(){
        //alert(btn.type); //button
        //console.log(btn.id);  //btn
        console.log(btn.value);   //按钮

        btn.value=http://www.mamicode.com/‘小按钮‘;   //修改属性>

 

2.2 innerHTML

*  在给innerHTML设置值的时候，如果这个值里面有html标签，那放到网页中，会把它解析成为一个真正的html标签
*  如果标签对当中有其他的标签，一样会拿得到

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        window.onload= function () {
          var btn=document.getElementById(‘btn‘);
            var box=document.getElementById(‘box‘);
            btn.onclick= function () {
                console.log(box.innerHTML);
                //设置
                box.innerHTML=‘<span>kaiven<span/>‘;
            }
        };
    </script>
    <input type="button" id="btn" value="http://www.mamicode.com/按钮" />
    <div id="box"><p>标题</p>这里是一段文字</div>
</body>
</html>

 

2.3 classname

        * className
        * 注意:class是js中的一个保留字，它是不允许我们使用的
        *   在获取class的时候，不能使用class,使用className

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="kaivon"  id="kaivon"></div>
    <script>
        var kaivon=document.getElementById(‘kaivon‘);

        //console.log(kaivon.class);  //undefined
        console.log(kaivon.className);  //kaiven


    </script>
</body>
</html>

 

2.4 href和src

    * href 连接的地址
    * src  图片的地址
    *
    * href与src取到的是绝对地址,不是属性里的值
    * 切记不要拿href与src取到的值去做判断

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    window.onload= function () {
        var pic = document.getElementById(‘pic‘);
        var link = document.getElementById(‘link‘);
        console.log(pic.src);  //http://localhost:63342/Python_Data_Analyse1/js%E5%AD%A6%E4%B9%A0/11.jpg
        console.log(link.href);  //http://localhost:63342/Python_Data_Analyse1/js%E5%AD%A6%E4%B9%A0/%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7href_src.html#
    }
</script>
<img id="pic" src="http://www.mamicode.com/11.jpg"/>
<a href="http://www.mamicode.com/#" id="link">js</a>
</body>
</html>

 

js属性


联系
我们