检测下划线并通过
有没有什么方法可以用JavaScript/jQuery检测元素是否穿透和下划线。检测下划线并通过
所以我们可以说，我们有：
<u><s>text here.</s>other text here.</u>
是否可以检测是否内<s>文本还强调？
*理想情况下，如果<u>有任何<s>孩子，将不会被允许看。
我一直在玩弄它，它似乎有点奇怪，两种风格使用相同的CSS属性，这反过来让我想知道它如何工作在第一位。
为了让我更清楚的问题：
我玩弄一个自制的所见即所得的编辑器，对于可用性的原因，我想实现上改变（点亮）的编辑按钮上的文本的监听器。例如当文本的一部分变为粗体时，“B”按钮变为激活状态。我目前正在通过获取光标处的元素并检查元素是粗体还是继承它来处理这个问题。
用下划线和striketrough的问题是，它们并没有被覆盖彼此的文字修饰属性，而不是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..
var str = '<u><s>text here.</s>other text here.</u>';
var el = $('<div>').html(str);
alert($('u s', el).length);
如果什么组合是
，甚至像
等什么，检查逆太..
var str = '<s><div><u></u></div><p><u></u></p></s>';
var el = $('<div>').html(str);
alert($('u s', el).length || $('s u', el).length);
如果初始字符串那么这不是一个有效的html您不知道某些浏览器在其输出中的表现如何。
PS：做了一些简单的例子，通过点击..
$(function(){
$('.wrapper').on('click', '*', function() {
var styles = ['line-through', 'underline'], counter = [0, 0], tags = ['S', 'U'];
$(this).parentsUntil('.wrapper').andSelf().each(function() {
var current = $(this).css('text-decoration'), $tag = $(this)[0];
$.each(styles, function(index, style) {
if (current.indexOf(style) > -1 || $tag.tagName == tags[index]) counter[index] += 1;
});
});
var results = [];
if (counter[0] > 0) results.push('striked');
if (counter[1] > 0) results.push('underlined');
alert(results.join(' and '));
return false;
});
});.strike {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='wrapper'>
<div class='strike'>
striked <u>underlined</u>
</div>
<div class='underline'>
underlined <s>striked</s>
</div>
</div>
一个有点可怕的做法，但我看得出来，不涉及明确检查筑巢，或依赖于默认的CSS幸存的任何主题化（<s>不会永远，必须，text-decoration: line-through;，同样<u>的唯一途径不会总是，不一定，有text-decoration: underline;）：
// the text-decoration styles you want to find:
var styles = ['line-through', 'underline'];
// finding all elements within the <body>, and
// filtering them:
var underlinedAndLineThrough = $('body *').filter(function() {
// caching because of re-use:
var self = $(this),
decor = self.css('text-decoration');
// if the 'text-decoration' style is found in the array of styles we're
// looking for:
if (styles.indexOf(decor) > -1) {
// we add that style as a class-name to the current element, and all
// descendants:
self.find('*').add(self).addClass(decor);
// we return the current element (to keep it in the collection):
return self;
}
// filtering again:
}).filter(function(){
// we keep the current element of the collection if it has all the css styles
// we're looking for:
return $(this).is('.' + styles.join('.'));
});
console.log(underlinedAndLineThrough);
参考文献：
- 的JavaScript：
- 的jQuery：
-
add()。 -
addClass()。 -
filter()。 -
find()。 -
is()。
-
您可以在任何无形的元素插入和检查'$（“美”）。length'它 – Cheery 2014-10-19 22:37:18
如果组合是什么'
'，甚至像''（只是为了覆盖我的基地）。 – Rebirth 2014-10-19 22:39:25
@重生检查我的答案。即使通过CSS提供样式，它也可以工作。 – redV 2014-10-19 23:00:11