操作元素 修改元素

改变元素内容

element.innerText   //从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉
element.innerHTML      //起始位置到终止位苦的全部内容，包括html标签，同时保留空格和换行

上代码:

 <button>点我有惊喜</button>
    <div id="bxo">每个时间</div>
    <p>12131</p>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            // div.innerText = '2021 - 5 - 26';
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var yaer = date.getFullYear(); //获取年月日
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期'];

            var day = date.getDay();
            return '今天是:' + yaer + '年' + month + '月' + dates + '日' + arr[day];
        }
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>

<style>
    div,
    p {
        width: 250px;
        height: 30px;
        background-color: pink;
        color: white;
        text-align: center;
        line-height: 30px;
    }
</style>

innerText和innerHTML的区别

innerText 不识别html标签 非标准   去除空格和换行

innerHTML 识别html标签  W3C标准   保留空格和换行的

修改元素

src  //改图片  title  //改文字   herf  //改路径      innerText 和innerHTML  //改变内容

操作表单属性设置

1.表单里面的文字是通过value来改变的  注意:innerHTML是改变div等里面的文字

2.禁用button按钮  disabled来禁用   注意:只能点击一次    btn.disabled = true; 用this也可以 this指向被调用的函数者

3.type改变为文本  通常用于密码显示  pwd.type= 'text';

样式属性操作

1. element.style  行内样式操作

注意:
1.Js里面的样式采取驼峰命名法比如fontSize、backgroundColor

2.Js修改style 样式操作，产生的是行内样式，css权重比较高

 

2 . element.className  类名样式操作

注意∶
1．如果样式修改较多，可以采取操作类名方式更改元素样式。
2. class因为是个保留字，因此使用lassName来操作元素类名属性

3. className会直接更改元素的类名，会覆盖原先的类名。

 

获得焦点onfocus        失去焦点onblur