javascript - GWT/CSS - ラベルのスタイリング部分

Question

ラベルのテキストの一部のスタイルを設定する方法はありますか? 色、太さ、サイズなどを変更しますか?

score 3 · Accepted Answer

ラベルの代わりに HTML ウィジェットを使用します。それで：

HTML label = new HTML();
label.setHtml("Brown <span class=\"brown\">fox</span>");

score -1 · Accepted Answer

私は少し退屈で、何か役に立つものを提供できるかもしれないと思ったので、これを提供します:

function elemStyle(el, needle, settings) {
    // if there's no 'el' or 'needle' arguments, we quit here
    if (!el || !needle) {
        return false;
    }
    else {
        // if 'el' has a nodeType of 1, then it's an element node, and we can use that,
        // otherwise we assume it's the id of an element, and search for that
        el = el.nodeType == 1 ? el : document.getElementById(el);

        // if we have a 'settings' argument and it's an object we use that,
        // otherwise we create, and use, an empty object
        settings = settings && typeof settings === 'object' ? settings : {};

        // defining the defaults
        var defaults = {
            'class': 'presentation',
            'elementType': 'span'
        },
            // get the text from the 'el':
            haystack = el.textContent || el.innerText;

        // iterate over the (non-prototypal) properties of the defaults
        for (var prop in defaults) {
            if (defaults.hasOwnProperty(prop)) {
                // if the 'settings' object has that property set
                // we use that, otherwise we assign the default value:
                settings[prop] = settings[prop] || defaults[prop];
            }
        }

        // defining the opening, and closing, tags (since we're using HTML
        // as a string:
        var open = '<' + settings.elementType + ' class="' + settings.class + '">',
            close = '</' + settings.elementType + '>';

        // if 'needle' is an array (which is also an object in JavaScript)
        // *and* it has a length of 2 (a start, and stop, point):    
        if (typeof needle === 'object' && needle.length === 2) {
            var start = needle[0],
                stop = needle[1];
            el.innerHTML = haystack.substring(0, start) + open + haystack.substring(start, stop) + close + haystack.substring(stop);
        }
        // otherwise if it's a string we use regular expressions:
        else if (typeof needle === 'string') {
            var reg = new RegExp('(' + needle + ')');
            el.innerHTML = haystack.replace(reg, open + '$1' + close);
        }
    }
}

上記は次のように呼び出されます。

// a node-reference, and a string:
elemStyle(document.getElementsByTagName('label')[0], 'Input');

JS フィドルのデモ。

// a node-reference, and a start-stop array:
elemStyle(document.getElementsByTagName('label')[0], [6, 8]);

JS フィドルのデモ。

// an id (as a string), and a string to find, with settings:
elemStyle('label1', 'Input', {
    'elementType' : 'em'
});

JS フィドルのデモ。

これは間違いなく、いくつかのエラーキャッチに関係する可能性があります (たとえば、配列が関数に渡された場合、要素が 2 つ未満またはそれ以上の場合、何も起こらず、ユーザー/開発者にエラーは返されません。el変数がどちらでもない場合も同様です)。ノード参照または、id問題が発生します:Uncaught TypeError: Cannot read property 'textContent' of null )。

そうは言っても、私は汚いと感じたので、単純なエラーチェックを追加しel、ドキュメント内の実際のノードに解決されない場合は報告しました。

el = el.nodeType == 1 ? el : document.getElementById(el);
// if 'el' is null, and therefore has no value we report the error to the console
// and then quit
if (el === null) {
    console.log("You need to pass in either an 'id' or a node-reference, using 'document.getElementById(\"elemID\")' or 'document.getElementsByTagName(\"elemTag\")[0].");
    return false;
}

参考文献:

javascript - GWT/CSS - ラベルのスタイリング部分

2 に答える 2

Related

Reference