当前位置: 首页 > web>阅读正文

javascript判断块元素、行内元素

2022.6.3 朱丰华 566 次 留下评论 1660字

js可以使用window.getComputedStyle(node)取得包含某个元素节点的属性对象,然后通过该对象的display属性获取display的值。

比如对img标签,p标签,分别进行判断,将得到inline,以及block,说明img是行内元素,而p标签是块元素。

<!DOCTYPE html>
<html>

<head>
    
    <meta charset="utf-8">
    
</head>

<body>

    <script>
        var eleName = "p"; //指定标签名创建标签

        var elt = document.createElement(eleName);
        document.body.appendChild(elt);
        
        var obj = window.getComputedStyle(elt);
        var tagName = elt.tagName;

        var display;

        if (obj.display == "inline") {
            display = "行内元素";
        } else if (obj.display == "block") {
            display = "块级元素";
        } else if(obj.display=="none"){
            display = "隐藏元素";
        }else if(obj.display=="inline-block"){
            display = "行内块元素";  // 同时拥有行、块元素的特性
        }else if(obj.display=="flex"){
            display = "弹性盒子";
        }else{
            display = "其他样式:"+obj.display;
        }

        document.write("<br>");
        document.write(tagName.toLowerCase() + "元素是:<span style='color:red''>" + display + "</span>");
        document.write("<br>");
    </script>

</body>

</html>

javascript 的 window.getComputedStyple 取得的样式为只读。

使用 ele.style.样式 可以写入属性。

css display 参考:

描述
none隐藏元素
block将元素设置为块级元素
inline将元素设置为内联元素
list-item将元素设置为列表项目
inline-block将元素设置为行内块元素
table将元素设置为块元素级的表格(类似<table>
inline-table将元素设置为内联元素级的表格(类似<table>
table-caption将元素设置为表格的标题(类似<caption>
table-cell将元素设置为表格的单元格(类似<td><th>
table-row将元素设置为表格的行(类似<tr>
table-row-group将元素设置为表格的内容部分(类似<tbody>
table-column将元素设置为表格的列(类似<col>
table-column-group将元素设置为表格中一个或多个列的分组(类似<colgroup>
table-header-group将元素设置为表格的头部(类似<thead>
table-footer-group将元素设置为表格的脚(类似<tfoot>
boxCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最老版本)
inline-boxCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最老版本)
flexboxCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的过渡版本)
inline-flexboxCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的过渡版本)
flexCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最新版本)
inline-flexCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最新版本)
run-in根据上下文来决定将元素设置为块级元素或内联元素
inherit从父元素继承 display 属性的值

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注