我想在链接中的单词的前几个字符下划线,类似于 CSS 首字母的工作方式,但字母数量可变。或者,在单词的前半部分下划线可能会有用。有什么方法可以用 HTML、CSS 或 Javascript 相对简单地做到这一点?
(我不是开发人员,我愿意接受所有人以及任何可以传递给开发团队的建议;)
最佳答案
<a href="#" class="underline">This is text.</a><br/>
<a href="#" class="underline">More text.</a><br/>
<a href="#" class="">No underline.</a><br/>
<a href="#" class="underline">Underline me.</a><br/>
<a href="#" class="">Nada here though.</a><br/>
a,
a.underline {
text-decoration: none;
}
.underline span {
color: green;
text-decoration: underline;
}
var links = document.links;
var chars = 3;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
var text = links[i].innerHTML;
text = '<span>' +
text.substring(0, chars) +
'</span>' +
text.substring(chars);
links[i].innerHTML = text;
}
}
编辑:单词。
var links = document.links;
var chars = 3;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
var text = links[i].innerHTML.split(' ');
for (var p = 0, words = text.length; p < words; p++) {
text[p] = '<span>' +
text[p].substring(0, chars) +
'</span>' +
text[p].substring(chars);
}
links[i].innerHTML = text.join(' ');
}
}
编辑:作为一个函数。
var links = document.links;
var chars = 2;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
setUnderline(links[i], chars);
}
}
function setUnderline(link, chars) {
var text = link.innerHTML.split(' ');
for (var p = 0, words = text.length; p < words; p++) {
text[p] = '<span>' +
text[p].substring(0, chars) +
'</span>' +
text[p].substring(chars);
}
link.innerHTML = text.join(' ');
}
关于javascript - 在单词的前 n 个字符下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8648867/