如何測試輸入的寬度是否已手動設置？

HTML如何測試輸入的寬度是否已手動設置？

<select id="food"> 
    <option>Pick Favorite Food</option> 
    <option>Banana</option> 
    <option>Orange</option> 
</select> 

<select id="place" style="width: 100px;"> 
    <option>Pick Favorite Place</option> 
    <option>Disneyland</option> 
    <option>Hawaii</option> 
</select>

的JavaScript

$('food').getStyle('width'); //56px 
$('place').getStyle('width'); //100px

如果沒有指定寬度，瀏覽器尺寸的輸入來動態地適合所有文本的。顯然這必須發生，所以你可以看到你的元素。

有沒有一種方法來測試元素是否手動設置樣式？內嵌，通過樣式表，甚至通過JavaScript？

$('food').getWidth(); //false 
$('place').getWidth(); //100px

來源

2012-10-18 Aust

可能重複的[jQuery的檢查，如果元件具有特定樣式屬性定義內聯（http://stackoverflow.com/questions/11306736/jquery-check-if-element-has-a-specific-style-property-在內部定義） – Alexander

@Alexander - 我很想知道如何從樣式表和內聯代碼中做到這一點，並且我沒有使用jQuery。 :) – Aust

瑞安有正確的想法，但由於您使用的原型，你可以使用readAttribute('style')並相信返回值從樣式屬性來了，不通過樣式表。

這裏有一個小提琴：http://jsfiddle.net/Q4bRP/

這裏的小提琴代碼：

#my-div { 
    border: 1px solid green; 
    margin-bottom: 10px; 
}

<div id="my-div">#my-div, click me</div> 
<button id="my-button">add inline style to #my-div</button>

$('my-div').on('click', 'div', function(event, el) { 
    var styleAttrVal = el.readAttribute('style'); 
    if (styleAttrVal) { 
     alert(styleAttrVal); 
    } else { 
     alert('no inline style set!'); 
    } 
}); 

$('my-button').on('click', function(event) { 
    $('my-div').setStyle({backgroundColor: 'yellow'}); 
});

您可以在使用正則表達式來測試你正在尋找的任何內聯值。

編輯：關於上述最後一個註釋使用正則表達式來拔出你需要什麼：你可能有一些運氣通過原型的源希望找到你需要的東西。他們必須爲Element.getStyle做類似的工作，以便您可以利用。

來源

2012-10-19 15:26:44 dontGoPlastic

是的，這很好。有什麼方法可以測試CSS是否來自樣式表？ – Aust

不是直接。您可以使用[Element.getStyle]（http://api.prototypejs.org/dom/Element/prototype/getStyle/）來讀取最終的應用樣式，然後像回答中一樣檢查屬性樣式值，然後比較兩者。 – dontGoPlastic

你可以通過檢查元素的樣式屬性做到這一點。這隻會在樣式直接在元素上設置時才起作用，因爲它在您的示例html中。

$.fn.getWidth = function(){ 
    var style = this.attr('style'); 
    return !~style.indexOf('width') ? false : style.match(/width\s*:\s*(\w+)\s*;/)[1]; 
}

編輯：

啊哈，更好的辦法。這是jQuery試圖太聰明的情況。使用樣式屬性的DOM元素本身：

$.fn.getWidth = function(){ 
    var style = this.get(0).style; 
    return style.width === '' ? false : style.width; 
}

來源

2012-10-18 21:00:26

如何測試輸入的寬度是否已手動設置？

回答

相關問題