关于H5中oncontextmenu contenteditable 和data- 做个记录

最新推荐文章于 2022-06-29 08:26:11 发布

woyuanliulian

最新推荐文章于 2022-06-29 08:26:11 发布

阅读量303

点赞数

分类专栏： Web前端文章标签： web

本文链接：https://blog.csdn.net/woyuanliulian/article/details/80871448

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" name="11" placeholder="haoa" value="nihao">

<ul>
    <!--//允许用户可以在先编辑，是一个布尔值的属性  可以被指定为true和false-->
    <li contenteditable="true">测试</li>


</ul>

<!--contextmenu 定义div元素的上下文菜单  只有在firfox中有效-->

<div οncοntextmenu="mymenu">上下文菜单
    <menu>
        <menuitem label="微信分享1"></menuitem>
        <menuitem label="微博分享"></menuitem>
    </menu>`
</div>


<!--  data- *   属性  可以自定义用户数据 有利于js脚本中判断每个李彪项目包含的信息类型  -->

<ul>
    <li data-animaml = "bird">猫头鹰</li>
    <li data-animaml = "fish">鲤鱼</li>
    <li data-animaml = "animal">长颈鹿</li>
    <li data-animaml = "tiger">老虎</li>
</ul>

<div id = "user"  data-uid = "12345" data-uname = "愚人码头" style="width: 200px" > </div>
<script src="js/jquery-1.12.4.js"></script>
<script>

    /*使用js的方式去访问自定义的属性*/
    var lists= document.getElementsByTagName("li");
    for(var key in lists){
        console.log(lists[key].dataset.animaml);
    }
    for(var  i = 0 ;i<lists.length;i++){

        console.log(lists[i].dataset.animaml);

    }
    /*使用jquery的范式去访问属性*/

    var $li = $("li").data("animaml");
    console.log($li);
    $(".box").data("blah");
    $(".box").data("blah", "hello");
    $(".box").data("blah");
    // 使用getAttribute获取 data- 属性
    /*这种取得元素属性是js的 这个浏览器都是支持的 */
    var userid  =  document.getElementById("user");
    var ni = userid.getAttribute("data-uid");
    /*当html中定了data-属性的时候  因为这种属性不会影响HTML的布局   这样取值的应该如下
    hrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实*/

    var usrdata  =  document.getElementById("user");
    console.log(usrdata.id);  //user
    console.log(usrdata.dataset.uid);  //12345
    console.log(usrdata.dataset.uname); //愚人码头
    usrdata.dataset.dateOfBirth = "nihao";
    console.log(usrdata.dataset.dateOfBirth); // ''


    /*关于data-属性选择器*/
    document.querySelectorAll ( '[data-flowering]' ) ;

    // 选择所有包含 'data-text-colour' 属性值为red的元素
    document.querySelectorAll ( '[data-text-colour="red"]' ) ;

</script>


<!--draggable  定义属性是否可以被拖动  true可以拖动  false不可以拖动  auto使用浏览器默认的行为  除了ie8以下   其他都是支持 -->

</body>
</html>

woyuanliulian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于H5中oncontextmenu contenteditable 和data- 做个记录

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;input ty
复制链接

扫一扫