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

发布于 2025-01-08 07:48:58 字数 284 浏览 1 评论 0原文

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

其他任务是在其他事件上显示小文本，仅使用简单的自定义类即可实现这一点并不太困难。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

罪#恶を代价 2025-01-15 07:48:58

您可以在页面加载时运行代码，然后在任何 AJAX 调用完成时使用 jQuery 的全局 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 函数有两个参数：

$root：（jQuery 对象）开始寻找小文本的根元素，尽可能限制这个以提高性能（所以不必要的元素不要不必扫描）。
state：（字符串）display属性添加到带有小文本的元素上，可以使用block来显示元素。

You can run the code on page-load, and then when any AJAX call completes using jQuery's Global AJAX Event Handlers: 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);
});

You can pass the findSmallText function two arguments:

$root: (jQuery object) the root element to start looking for small text, limit this as much as possible to increase performance (so unnecessary elements don't have to be scanned).
state: (string) the display property to add to the elements with small text, you can use block to show the elements.

回复收藏 0 原文

愁杀 2025-01-15 07:48:58

如果 HTML 结构没有改变（没有通过 AJAX 添加额外的容器），只需分析 onLoad 页面（有点像 Jasper 建议的那样），而不是在每次 AJAX 调用后重新运行分析，而是添加一个新类 - 让我们称之为 .HideMeInCertainCases 为了好玩。这样，您就可以随时使用简单的选择器隐藏/显示您想要的所有内容。
因此，不要使用 $(this).css('display', state); 使用 $(this).addClass('HideMeInCertainCases');

当事件发生时您正在谈论的情况发生后，您可以使用此选择器 $("HideMeInCertainCases").toggleClass("hideMe") 切换显示状态。直接更改显示属性可能会破坏布局，因为包含文本的节点可能有不同的显示（块、内联、内联块...）。当然 .hideMe { display:none; } 应该位于样式表中的某个位置。如果您希望布局保持不变并且仅隐藏内容，请使用 visibility 而不是 display