GWT/CSS - 樣式標籤的一部分

Question

有沒有一種方法可以對標籤中的部分文本進行樣式設置 - 更改顏色，粗體，大小等？

Answer 1

使用HTML小部件而不是Label。然後：

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

Answer 2

我有點無聊，我想我也許能提供一些有用的東西，所以，這麼說，我提供這個：

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 Fiddle demo。

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

JS Fiddle demo。

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

JS Fiddle demo。

這肯定可以處理一些錯誤（例如，如果一個數組被傳入的函數少於或多於兩個元素nothing happens，並且沒有錯誤返回給用戶/開發人員;如果el變量既不是節點引用也不是id,things go wrong: 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; 
} 

參考文獻：

• document.getElementById()。
• JavaScript regular expressions。
• Node.nodeType。
• string.replace()。
• String.substring()。
• typeof variable。