Reb*_*rth 5 javascript css jquery
是否有任何方法可以使用 JavaScript/jQuery 检测元素是否带有删除线和下划线。
所以假设我们有:
<u><s>text here.</s>other text here.</u>
Run Code Online (Sandbox Code Playgroud)
是否可以检测其中的文本<s>是否也有下划线?
*理想情况下,如果<u>有<s>孩子,则不允许查看。
我一直在玩弄它,两种样式都使用相同的 CSS 属性似乎很奇怪,这反过来又让我想知道它最初是如何工作的。
为了让我的问题更清楚:
我正在玩一个自制的所见即所得编辑器,出于可用性原因,我试图在文本上实现一个监听器来改变(点亮)编辑按钮。例如,当部分文本为粗体时,“B”按钮变为活动状态。我目前正在通过获取光标处的元素并检查该元素是否为粗体或继承它来处理此问题。
下划线和删除线的问题在于,它们既不会覆盖彼此的 text-decoration 属性,也不会在 css 中可见
当我将光标放在带下划线的文本片段上时,该text-decoration属性仅显示为underline,而文本同时为underline和line-through。在这种情况下,我无法知道<u>元素和<s>元素之间的确切关系;<s>据我所知,该元素可能是 100 个父母。
很多文字,但我希望它有点清除我的情况。
这是这样做的强大方法。@Cheery 答案效果很好,但如果斜体或下划线或通过 CSS 提供的任何其他字体样式失败。归功于 Tim Down 对此类问题的众多回答。
function checkState(element, check) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
var range, checked = false;
if (window.getSelection) {
var sel = window.getSelection();
if (sel && sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
document.designMode = "on";
sel.removeAllRanges();
sel.addRange(range);
}
}
if (document.queryCommandState) {
checked = document.queryCommandState(check);
}
if (document.designMode == "on") {
document.designMode = "off";
}
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
return checked;
}
alert(checkState('c', 'underline')); // italic, bold etc..
Run Code Online (Sandbox Code Playgroud)