HTML属性操作-CSDN博客

属性名属性值

相关操作：读与取

一、属性读操作：元素.属性，其实在就是找到等号右边的值

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <select name="" id="select">
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="hz">杭州</option>
    </select>
    <input type="button" value="按钮" id="button">
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $('button').onclick=function(){
        var a=$('text').value+'在'+$('select').value;
        alert(a)
    }
</script>
</html>

二、属性写操作：("添加")替换、修改

元素.属性名=新的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <select name="" id="select">
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="hz">杭州</option>
    </select>
    <input type="button" value="按钮" id="button">
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $('button').onclick=function(){
        $('button').value='button';//button的值原为按钮，将其修改为button
        $('text').value="老朋友";//原先text的值为空，其实是把空值修改为有值
    }
</script>
</html>

三、innerHTML 读取元素内的所有HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮" id="button">
    <p id="content">这是一段文字</p>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $('button').onclick=function(){
        var a=$('content').innerHTML;
        alert(a)
    }
</script>
</html>

动态添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <input type="button" value="按钮" id="button">
    <p id="content"></p>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $('button').onclick=function(){
    
        $('content').innerHTML=$('text').value;//将写入文本框的内容，动态添加到P标签中
    }
</script>
</html>

同样，写可以插入图片

插入按钮

练习：input中输入文字内容，可以在文本框中显示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            margin: 200px auto;
            height: 200px;
        }
        #content{
            border: 1px solid #000;
            height: 200px;
        }
        #submit{
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="content"></div>
    <span id="name">主人：</span><input type="text" id="text"><input type="button" id="submit" value="提交">
</div>
</body>
<script>
    function $(id){
        return document.getElementById(id);
    }
    window.onload=function () {
        $('submit').onclick=function(){
            $('content').innerHTML+=$('name').innerHTML+$('text').value+'<br />';//这边有一个值得注意的：span是没有value属性的，只有表单元素具有value属性
            $('text').value='';
        }
    }
</script>
</html>

四、属性操作注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        input{
            cursor: pointer;
        }
        .red{
            color: red;
            width: 300px;
            background-color: yellow;
        }
        .blue{
            color: yellow;
            width: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="duce">
    <input type="button" value="红" id="red" >
    <input type="button" value="蓝" id="blue">
    <p id="introduce" >钉钉(DingTalk)-由阿里巴巴集团开发,免费提供给所有中国企业用于商务沟通和工作协同!钉钉-中国领先的智能移动办公平台!</p>
</div>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    var num=15;
    $('add').onclick=function(){
        num++;
        $('introduce').style.fontSize=num+'px';//JS中不允许出现'-'，所以font-size应该写成fontSize
    }
    $('duce').onclick=function(){
        num--;
        $('introduce').style.fontSize=num+'px';
    }
    $('red').onclick=function(){
        $('introduce').className='red';//注意：给一个元素动态添加类，不是class，而是className
    }
    $('blue').onclick=function(){
        $('introduce').className='blue';
    }
</script>
</html>

2.控制元素浮动

如果想要修改float属性，得注意IE（styleFloat）、非IE（cssFloat）（浏览器的兼容问题）

即写成

更好的方法是：写一个类，在类里写上浮动样式，修改类即可。

3.想要实现一个效果：

有一个div框，在第一个text输入框中输入修改的属性，第二个输入值，则div框就会相应的被修改

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid black;
            background-color: ;
        }
    </style>
</head>
<body>
    输入想要修改的属性：<input type="text" id="attr"></br>
    输入修改属性的值：<input type="text" id="val"></br>
    <input type="button" value="按钮" id="btn">
    <div id="box"></div>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $('btn').onclick=function(){
        $('box').style[$('attr').value]=$('val').value;//此处注意：要修改box的style，属性值可以通过value直接拿到，并且是个定值。但是，一个div的属性有很多种，可以是宽 高 背景色等等，是变化的，所以不能直接写定值。也不可以写成$('box').style.$('attr').value，因为'.'后面接的不应该是变量
    }
</script>
</html>