JavaScript的属性操作

最新推荐文章于 2022-04-13 15:08:41 发布

可芭乐

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量237

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/52891706

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

JavaScript的属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script type="text/javascript">
    window.onload = function (){
        var oBtn = document.getElementById('btn');
        var oSelect = document.getElementById('select1');
        var oText = document.getElementById('text1');
        var oP = document.getElementById('p1');

        oBtn.onclick = function (){
            //alert(oText.value + '在' +oSelect.value);
            //oText.value = oSelect.value;
            //alert(oP.innerHTML) ;
            oP.innerHTML = oText.value;
            oText.value = '';
        }
    }
</script>
<body>
    <input id="text1" type="text" />
    <select id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    <input id="btn" type="button" value="按钮">
    <p id="p1">这是一段文字……</p>
</body>
</html>

定义方法

var oBtn = document.getElementById('btn');
        var oSelect = document.getElementById('select1');
        var oText = document.getElementById('text1');
        var oP = document.getElementById('p1');

解释下一段程序：

oBtn.onclick = function (){
            alert(oText.value + '在' +oSelect.value);
            oText.value = oSelect.value;
            alert(oP.innerHTML) ;
            oP.innerHTML = oText.value;
            oText.value = '';
        }

1、alert(oText.value + ‘在’ +oSelect.value);
字符串的连接
2、oText.value = oSelect.value;
文本替换
3、alert(oP.innerHTML) ;
弹出oP中的HTML内容
4、oP.innerHTML = oText.value;
oText.value = ”;
替换oP中的内容并将oText的内容清除