我有:简单的 html 文本 block :
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
问题: 如何借助 JavaScript 在某些短语下方(现有文本行之间)插入概念？
即我想用几句话解释一下上面的文字中什么是核能，所以我想在该短语下面插入几个单词(比如在鼠标上)结束)。
最佳答案
这样就可以了。如果您需要更多详细信息，请告诉我。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
p = p[0];
var tmp = '';
p.addEventListener('mouseover', function(){
tmp = p.innerHTML;
p.innerHTML = p.innerHTML + ' ...about nuclear...';
}, false);
p.addEventListener('mouseout', function(){
p.innerHTML = tmp;
}, false);
</script>
</body>
</html>
这是一个具有可用于任何元素的通用函数的版本。
<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, text){
var tmp = '';
element.addEventListener('mouseover', function(){
tmp = element.innerHTML;
element.innerHTML = element.innerHTML + text;
}, false);
element.addEventListener('mouseout', function(){
element.innerHTML = tmp;
}, false);
};
</script>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], '...about nuclear...');
</script>
</body>
</html>
将其插入到单词旁边。我使用红色的 span 标签来强调。您当然可以添加任何您喜欢的内容。
<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, words, text){
var tmp = '';
element.addEventListener('mouseover', function(){
tmp = element.innerHTML;
element.innerHTML = element.innerHTML.replace(words, function(m){
return m+'<span class="nuc">'+text+'</span>';
});
}, false);
element.addEventListener('mouseout', function(){
element.innerHTML = tmp;
}, false);
};
</script>
<style>
.nuc{ color: red; }
</style>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], /nuclear/g, '...about nuclear...');
</script>
</body>
</html>
我还在 switchText 函数中添加了 Words 参数，以使其更加通用。
第四个也是最后一个条件已经解决。以下将允许在特定悬停的单词或短语上显示文本。
<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, words, text){
element.innerHTML = element.innerHTML.replace(words, function(m){
return '<p class="nuc">'+m+'</p>';
});
var nuc = element.getElementsByClassName('nuc');
for(var i=0; i<nuc.length; i++){
(function(nuc){
var tmp = nuc.innerHTML,
doing = false;
nuc.addEventListener('mouseover', function(){
if(!doing)
this.innerHTML = this.innerHTML + text;
doing = true;
});
nuc.addEventListener('mouseout', function(){
this.innerHTML = tmp;
doing = false;
});
})(nuc[i]);
}
};
</script>
<style>
.nuc{ color: red; display: inline;}
</style>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], /nuclear/g, '...about nuclear...');
</script>
</body>
</html>
提醒一下，使用此方法与某些类型的 CSS 定位 可以制作样式弹出窗口、内联导航，以及可能的其他框奇怪的行为。
关于Javascript:选择时切换文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26928603/