gpt4 book ai didi

javascript - 使用 HTML 或 Javascript 替换网页上的文本

转载 作者:行者123 更新时间:2023-11-30 17:00:55 24 4
gpt4 key购买 nike

我正在自定义由第三方提供和托管的 HTML 页面,因此我对该页面的操作受到严格限制。页面上有一个导航菜单,如下所示。

<ul class='nav'>
<li class='active'>
<a href='/affiliate'>
<span id='affiliate-nav-homepage'>
<span class='default'>Home Page</span>
</span>
</a>
</li>
<li>...

问题:如果允许我做的只是添加一个 <style>,我怎样才能让上面的代码片段显示文本“Home”而不是“Home Page”页面中的元素 <head> ;并在页面开头附近添加一些 HTML 代码(可能包括 Javascript)?

我曾考虑走这两条路中的一条,但这两条路都有问题。

1) 使用 CSS 隐藏其文本(“主页”)。使用 :before 添加我自己的文本(“主页”)或 :after伪选择器。

display: none可能不是隐藏文本的好方法,因为浏览器不理解 :before:after还是会懂display: none我最终将完全没有文本。

是否有更好的 CSS 替代品适合我?将字体大小更改为 0?改变文字颜色?以某种方式操纵 z-index?如果某些较旧的浏览器显示文本“主页”是可以的。如果某些浏览器显示“Home Page Home”,或者如果某些浏览器根本不显示任何文本,则 OK。

-- 或者 --

2) 使用Javascript操作DOM

Javascript 的困难在于我只能将它插入页面正文开头附近我要修改的元素之前。我可以 Hook 一个在整个页面加载后触发的事件,但我想避免页面文本闪烁(文本“主页”短暂显示然后更改为“主页”)。是否存在这样的事件,我将如何 Hook 它?

谢谢你的帮助。

最佳答案

防闪修复:

.default { display: none; }

文档准备好后更改文本并显示:

body.onload = function (){

//getElementsByClassName not working in old browsers, so ...
var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];

el.innerHTML = 'Home';
el.style.display = 'block';
};

附加您可以通过此方法隐藏所有内容并在所有 javascript 更改后显示它。

这不是优雅的解决方案,但正如您所说,您解决问题的选择有限。

关于javascript - 使用 HTML 或 Javascript 替换网页上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28883660/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com