通过js操作元素之改变元素

Posted by xiongmao; tagged with 元素操作 , innerText , innerHTML

导读：


JavaScript 的DOM操作可以改变网页内容，结果和样式，我们可以利用DOM操作元素来改变元素里面的内容， 属性 等。注意以下都是属性

element.innerText改变元素内容

从起始位置到终止位置的内容，但它除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

要求：当我们点击按钮，div里面的文字变成当前时间
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
///2.注册事件
btn.onclick = function(){
  div.innerHTML = getDate();
}
//创建获取当前时间函数
function getDate(){
  var date = new Date();
  //获取当前时间
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var dates = date.getDate();
  var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五','星期六'];
  var day = date.getDay();
  return '今天是：' + year + '年' + month + "月" + dates + '日' + arr[day];
  
}

//我们元素可以不用添加事件出来

var p = document.querySelector('p');
p.innerText = getDate();

kyzs3cvm.png

kyzs3lhv.png

innerText和innerHTML区别
innerText

不能识别html标签 非标准 去除空格和换行
div.innerTexr = '今天是：星期五'
他会把strong这个标签输出，出来而不是加粗

innerHTML

innerHTML 识别html标签 W3C标准 保留空格和换行，推荐使用

表单元素属性操作

{callout color="#f0ad4e"}
表单元素属性操作：type value checked selected disabled
{/callout}

    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        /* 
        表单元素的属性操作
        type，value，checked，selected，disabled，
        */

        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件  处理程序
        btn.onclick = function(){
            //input.innerHTML = '点击了' ; 这个是 普通盒子 比如 div 标签里面的内容
            //表单里面的值 文字内容是通过 value 来修改的
            input.value = '你被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要禁用这个按钮button
           /*  btn.disabled = true; */
            // 或者用this ，this指向的是当前事件函数的调佣着 btn
            this.disabled = true;
        }
    </script>
操作元素之样式属性操作

通过js修改元素的大小，颜色，位置等样式

  1. element.style 行内样式
  2. element.className 类名样式

注意：

  1. js里面的样式采取驼峰命名法比如 fontSize backgroundColor
  2. js修改style样式操作，产生的是行内样式，css权重比较高
通过className更改元素样式
 <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
        .change{
            width: 200px;
            height: 200px;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div class="first">文本</div>
    <script>
        //1.使用element.style 获得元素样式，如果样式比较少 或者 功能简单的情况下使用
        var text = document.querySelector('div');
        text.onclick = function(){
            // 2.我们可以通过 修改元素的className更改元素的样式，适合于样式较多或者复杂的情况
            /* this.className = 'change'; */
            //3.如果想要哦保留原先的类名，可以这样
            this.className = 'first change'
        }
    </script>
</body>
</html>