Question

有没有办法用JavaScript / jQuery检测是否有一个元素是通过和加下划线的。

所以，让我们说：

<u><s>text here.</s>other text here.</u>

是否可以检测<s>中的文字是否也加下划线？

*理想情况下，我们不允许查看<u>是否有<s>个孩子。

我一直在玩弄它似乎很奇怪两种风格都使用相同的CSS属性，这反过来让我想知道它是如何起作用的。

让我的问题更清楚：

我正在玩一个自制的wysiwyg编辑器，出于可用性的原因，我试图在文本上实现一个改变（点亮）编辑按钮的监听器。例如当一部分文字是粗体时，＆＃34; B＆＃34;按钮变为活动状态。我目前通过获取光标处的元素并检查元素是否为粗体或继承它来处理此问题。

下划线和删除线程的问题是它们既不会覆盖彼此的文本修饰属性，也不会在css中显示

当我将光标放在带下划线的文本片段上时，text-decoration属性仅显示为underline，而文本同时为underline和line-through。在这种情况下，我无法知道<u>元素和<s>元素之间的确切关系;据我所知，<s>元素可能是100个父母。

很多文字，但我希望它能解决我的情况。

Answer 1

这是实现这一目标的有力方法。 @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..

Answer 2

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>

Answer 3

一种有点可怕的方法，但我能看到的唯一方法是不涉及明确检查嵌套，或依赖默认的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);

JS Fiddle demo

参考文献：

JavaScript的：
- Array.prototype.indexOf()。
- Array.prototype.join()。
jQuery的：
- add()。
- addClass()。
- filter()。
- find()。
- is()。

检测下划线并通过检查

3 个答案: