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

javascript基础——属性操作

时间:2015-04-11 11:33:26      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

HTML 的属性操作:读、写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS属性操作</title>
    <script>
    /*
        HTML 的属性操作:读、写
            属性名:
            属性值:
            
            读操作:获取、找到
            元素.属性名
            
            写操作:“添加”、替换、修改
            元素.属性名 = 新的值
            
    */
    window.onload = function(){
        // 获取元素
        var oText = document.getElementById(text1);
        var oSelect = document.getElementById(select1);
        var oBtn = document.getElementById(button1);

        // alert(oBtn.value);        // ‘按钮‘
        // alert( oText.value );
        // alert( oSelect.value );
        
        // 字符串连接
        // oText.value    oSelect.value
        // ‘张三‘ +  ‘北京‘     =>    ‘张三北京‘
        // ‘张三‘ + ‘在‘ + ‘北京‘     =>    ‘张三在北京‘
        
        oBtn.onclick = function(){
            alert(oText.value +  + oSelect.value);
        };
    };
    </script>
</head>
<body>
    <input type="text" id="text1">
    <select name="" id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
    <input type="button" id="button1" value="按钮" />

</body>
</html>

读操作:获取、找到
元素.属性名

写操作:“添加”、替换、修改
元素.属性名 = 新的值

innerHTML操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<script>
    /*
        oP.innerHTML            => 读取p里面所有的html代码
        oP.innerHTML = 123;        => 替换p里面所有的html代码
    */
    window.onload = function(){
        // 获取元素
        var oText = document.getElementById(text1);
        var oBtn = document.getElementById(btn1);
        var oP = document.getElementById(p);

        oBtn.onclick = function(){

            oP.innerHTML = oText.value;
            oText.value = ‘‘;
        };
    };
</script>
<body>
    <input type="text" id="text1">
    <input type="button" value="按钮" id="btn1">
    <p id="p">这是一段文字</p>
</body>
</html>

oP.innerHTML =>     读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码

 

javascript基础——属性操作

标签:

原文地址:http://www.cnblogs.com/bokebi520/p/4417101.html

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