Js操作样式和this的认识

最新推荐文章于 2024-05-09 11:30:20 发布

冒险岛_0_

最新推荐文章于 2024-05-09 11:30:20 发布

阅读量779

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_41741971/article/details/89577948

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、Js操作元素

innerHtml 获取或者修改或添加元素里面的内容（常用）

innerText 获取或者修改或添加元素里面的内容（不常用）

区别：innerText不能解析标签

<body>
    <div id="box"></div> 
</bod>
<script>
    var oBox = document.getElementById('box');
    
    //获取到元素里面所有的内容包括标签
    console.log(oBox.innerHtml)<body>
    //innerHTML和innerText的区别
        
    oBox.onmouseenter = function(){
        this.innerHTML = '<p>小南是世界上最帅的男人！</p>';
    }
    oBox.onmouseleave = function (){
        this.innerText = '<p>楠楠是最帅的男人！</p>'
    }
</script>

innerHTML：（能解析标签）

innerText:（不能解析标签）

2、this的简单认识

this：指向当前事件对象

oBox.onmuseenter = function(){
    this.innerHtml = '<p>哈哈</p>'
}

3、Js操作样式

语法：对象.style.css属性 = ‘值’；如果有'-'就用驼峰命名法（把减号去掉

减号后面第一个字母大写，如：margin-top，写成：marginTop）

<body>
    <div id='box'></div>    
</bod>
<script>
    var oBox = document.getElemrntById('Box');
     oBox.onmouseenter = function(){
        this.style.backgroundColor = 'red';
    }
    oBox.onmouseleave = function (){
        this.style.backgroundColor = 'yellow';
    }
</script>

float浮动不能写成oBox.sttyle.float

因为float是关键字

var oBox = document.getElemrntById('Box');
/* 在谷歌 */
oBox.style.cssFloat = 'left';
/* ie低版本 ie8以下 */
oBox.style.styleFloat = 'left';
/* 获取类名 :不能用class*/
oBox.className = 'on';
/* 获取ID名 */
console.log(oBox.id)

冒险岛_0_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js操作样式和this的认识

1、Js操作元素innerHtml 获取或者修改或添加元素里面的内容（常用）innerText 获取或者修改或添加元素里面的内容（不常用）区别：innerText不能解析标签<body> <div id="box"></div> </bod><script> var oBox = documen...
复制链接

扫一扫