javascript - 如何隐藏所有小于特定像素的文本并在以后使用 Javascript 将它们恢复？

Question

我正在做一个元素，在某些情况下需要隐藏所有小文本(例如小于 12 像素)，并在其他一些事件中将它们恢复。它不是网站，而是 webkit 浏览器上发生的事情。我无法控制页面上的内容(由第三方开发人员开发)，但可以控制修改它。我知道我可以遍历所有标签元素并检查字体大小，如果小于 12px 则隐藏它们，但这不仅效率低下，而且文本可以更改为再次显示，比如在 ajax 调用之后，这是“禁止的”。其他解决方案是每隔几秒运行一次该循环，但这是一个昂贵的过程。

其他任务是在其他事件上显示小文本，仅使用简单的自定义类即可实现。

Answer 1

您可以在页面加载时运行代码，然后在使用 jQuery 的全局 AJAX 事件处理程序完成任何 AJAX 调用时运行代码:http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(function () {
    function findSmallText($root, state) {
        if (typeof $root == 'undefined') {
            $root = $(document);
        }
        if (typeof state == 'undefined') {
            state = 'none';
        }
        $.each($root.find('p, div, span, font, button, a'), function () {
            if ($(this).css('font-size').replace(/(px|pt|em)/gi, '') <= 12) {
                $(this).css('display', state);
            }
        });
    }

    //run the function when the DOM is ready
    findSmallText();

    //also run the function when any AJAX request returns successfully
    $(document).ajaxSuccess(findSmallText);
});

您可以向 findSmallText 函数传递两个参数:

1. $root:(jQuery 对象)开始寻找小文本的根元素，尽可能限制它以提高性能(因此不必扫描不必要的元素)。
2. state: (string) display属性添加到带有小文本的元素，你可以使用block来显示元素。