HTML5新增的通用属性

最新推荐文章于 2021-06-03 09:15:25 发布

心情一天一变

最新推荐文章于 2021-06-03 09:15:25 发布

阅读量227

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/dingchao823/article/details/48132693

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、contentEditable

如果该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素内的内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素，而是把<table />、<div />等元素编程可编辑的状态。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>contentEditable属性</title>
</head>

<body>
    <div contenteditable="true" style="width:500px;border:1px solid black">
        <table style="width:420px;border-collapse:collapse" border="1">
            <tr>
                <td>疯狂Java讲义</td>
                <td>疯狂android讲义</td>
            </tr>
            <tr>
                <td>学习了很多东西</td>
                <td>我也学习了很多</td>
            </tr>
        </table>
    </div>
     <hr/>
    <!--这个表格默认是不可编辑状态的，双击之后编程可编辑状态-->
    <table id="target"
        onDblClick="this.contentEditable=true;"
        style="width:420px;border-collapse:collapse" border="1">
        <tr>
            <td>java</td>
            <td>web</td>
        </tr>
            <td>c++</td>
            <td>c#</td>
        <tr>
        </tr>    
    </table>
</body>
</html>

2、designMode属性

该属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所有可支持contentEditable属性的元素都可以变成可编辑状态，designMode属性默认为off。在javascript中只能修改整个HTML页面的designMode属性。

<body ondblclick="document.designMode='on';">
    <div>aaaaa</div>
    <table style="width:420px;border-collapse:collapse" border="1">
        <tr>
            <td>疯狂java</td>
            <td>水浒传</td>
        </tr>
        <tr>
            <td>老人与海</td>
            <td>这波可以</td>
        </tr>
    </table>
</body>

双击之后就可以编辑该网页中的所有内容。

3、hidden属性

HTML5为所有元素都提供了一个hidden属性，这个hidden属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。（hidden属性可以代替css样式单中的display属性，设置hidden=”true”）相当于在CSS中设置display:none。

<body>
    <div id="target" hidden="true" style="height:80px">
        文字内容
    </div>
    <button onClick="var target = document.getElementById('target');
                     target.hidden = !target.hidden;">显示/隐藏</button>
</body>

4、spellcheck属性

HTML为input、textarea等元素增加了spellcheck属性，该属性支持true、false两个属性值，如果设置spellcheck=”true”，浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过，浏览器会对拼错的单词进行提示。

<body>
    <textarea spellcheck="true" rows="3" cols="40">
    </textarea>
</body>

心情一天一变

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的通用属性

1、contentEditable 如果该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素内的内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素，而是把、等元素编程可编辑的状态。 doctype html>html>head>meta charset="utf-8">title>contentEditable属性title>head>
复制链接

扫一扫