前端的小玩意（7）——自动给每个字下方加着重号

绝地灬酷狼 2022-09-24 10:24 13阅读 0赞

要求：

①给需要加着重号的字，统一给一个类，可以多个字给在同一个类下面；

②会自动给每个字的下方加点，

潜在缺陷：

①对中文字体可能支持不好，但也有结局办法，即在arr.forEach的循环语句中，判断一次类，然后赋予其不同的类，针对不同类做样式即可；

<!DOCTYPE html>
    <html>
    <head>
        <style>
            .wavy {
                position: relative;
            }
    
            .wavy:before {
                content: ".";
                position: absolute;
                top: 10px;
                left: 2px;
            }
        </style>
        <script src='jq.js'></script>
        <script>
            $(document).ready(function () {
                var text = $(".text").text();
                var arr = [];
                for (var i = 0; i < text.length; i++) {
                    arr.push(text.charAt(i));
                }
                var str = "";
                arr.forEach(function (item) {
                    item = "<span class='wavy'>" + item + "</span>";
                    str += item;
                })
                $(".text").html(str);
            })
        </script>
    </head>
    <body>
    <div class="text">abcdefg</div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关给网页标题前加一个小图标

在head部分添加一个link标签 <!DOCTYPE html> <html> <head> <title>Vue测试</title>

本是古典何须时尚/ 2023年06月10日 03:26/ 0 赞/ 19 阅读

相关前端的小玩意（7）——自动给每个字下方加着重号

要求： ①给需要加着重号的字，统一给一个类，可以多个字给在同一个类下面； ②会自动给每个字的下方加点，潜在缺陷： ①对中文字体可能支持不好，但也有结局办法，

绝地灬酷狼/ 2022年09月24日 10:24/ 0 赞/ 14 阅读

相关前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能

先上DEMO，虽然丑，那是因为零级按钮的界面太丑了，图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多，毕竟美观不是我的特长嘛 ![20160706141917691][]

迷南。/ 2022年09月23日 05:57/ 0 赞/ 8 阅读

相关前端的小玩意（3）禁止元素被选中

（28）禁止元素被选中在css的样式表里，添加这样属性（可兼容所有浏览器） { -moz-user-select: -moz-none;

傷城~/ 2022年09月21日 13:13/ 0 赞/ 199 阅读

相关前端的小玩意（4）自定义checkbox或者radio的外观

原理：通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去 CSS代码： .radio { /这个描述的是输入框的基本样式，透明，绝对定位，浮动在

「爱情、让人受尽委屈。」/ 2022年09月21日 13:13/ 0 赞/ 123 阅读

相关前端的小玩意（2）jQuery的选择器大全

(34)选择器 ①普通选择方法，略 ②选择其中的c，要求是b里的c <div class="a"> <div class="b">

╰+攻爆jí腚メ/ 2022年09月21日 11:38/ 0 赞/ 144 阅读

相关前端的小玩意（10）CSS3的:nth选择器

原文来源于： http://www.w3cplus.com/css3/pseudo-class-selector 的编号三给没有使用过人的说明： ①带

本是古典何须时尚/ 2022年07月15日 23:08/ 0 赞/ 169 阅读

相关前端的小玩意（13）——获取DOM的位置相关信息

Github的DEMO地址： https://github.com/qq20004604/some\_demo/tree/master/%E5%85%B3%E4%BA%8Ec

「爱情、让人受尽委屈。」/ 2022年07月15日 15:49/ 0 赞/ 136 阅读

相关前端的小玩意(16)——在IE7的场景下，获取字符串的第n个字符

习惯于IE9和更高，最差也是IE8，因此从没遇见过这个问题。比如有字符串 var abc = "abc"; 如果你想获取第一个字符，那么我们一般人的反应是

淩亂°似流年/ 2022年06月18日 01:08/ 0 赞/ 111 阅读

相关前端的小玩意（16）——利用setter和getter实现数据校验

利用setter和getter实现数据校验写前端和后端的时候，往往要进行数据校验。例如：后端在处理数据之前，需要校验前端传过来的数据和后端要求的数据是否相符，以

Bertha 。/ 2022年06月09日 07:23/ 0 赞/ 228 阅读