0

class="btn-default" を使用して、ボタン要素の正確な幅 (ブラウザーが表示し、要素の検査などのツールで表示できる幅) を取得する必要があります。

コードは次のとおりです。

私はこれを試しました：

  $('.btn-default').each(function(index, value){
      btn = $(this)[0].offsetWidth;
      console.log(btn);

});

この ：

$('.btn-default').each(function(index, value){
      btn = $(this).width();
      console.log(btn);

});

およびinnerWidth()およびouterWidth()

それらはすべて間違った値を示しています

これを行うときは、次のことを追加する必要があります。

  $('.btn-default').each(function(index, value){
      btn = $(this).width(false);
      console.log(btn);

});

これは、offsetWidth 属性に適切なサイズがあることを示しています。

[button.btn btn-default, context: button.btn btn-default, jquery: "1.9.1", constructor: function, init: function, selector: ""…]
0: button.btn btn-default
accessKey: ""
attributes: NamedNodeMap
autofocus: false
baseURI: "file:///home/pkhodaveissi/Work/Hadi/trade.html"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: "btn btn-default"
clientHeight: 28
clientLeft: 1
clientTop: 1
clientWidth: 134
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
disabled: false
draggable: false
firstChild: text
firstElementChild: null
form: null
formAction: ""
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
hidden: false
id: ""
innerHTML: "Find a Product"
innerText: "Find a Product"
isContentEditable: false
labels: NodeList[0]
lang: ""
lastChild: text
lastElementChild: null
localName: "button"
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: text
nodeName: "BUTTON"
nodeType: 1
nodeValue: null
offsetHeight: 30
offsetLeft: 555
offsetParent: body
offsetTop: 452
offsetWidth: 136
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
outerHTML: "<button class="btn btn-default">Find a Product</button>"
outerText: "Find a Product"
ownerDocument: document
parentElement: div.grhb
parentNode: div.grhb
prefix: null
previousElementSibling: p
previousSibling: text
scrollHeight: 28
scrollLeft: 0
scrollTop: 0
scrollWidth: 134
spellcheck: true
style: CSSStyleDeclaration
tabIndex: 0
tagName: "BUTTON"
textContent: "Find a Product"
title: ""
translate: true
type: "submit"
validationMessage: ""
validity: ValidityState
value: ""
webkitInsertionParent: null
webkitPseudo: ""
webkitShadowRoot: null
webkitdropzone: ""
willValidate: true
__proto__: HTMLButtonElement
context: button.btn btn-default
length: 1
__proto__: Object[0]
4

3 に答える 3

1

これを試して：

<button id="getVal" onclick="wValue()">get Width</button>
        <script type="text/javascript">
            function wValue() {
                var wVal = $("#getVal").width();
                alert(wVal);
            }
        </script>

クラスに $(".name") を使用するか、ID に $("#name") を使用します

于 2013-08-12T11:45:22.777 に答える
0

非常に奇妙な振る舞い。ボタンタグにデフォルトのパディングを与えるブラウザにかかっている可能性があります。これは厄介な回避策ですが、機能します...

$('.btn-default').each(function(index, value){
   console.log($(this).css('width').replace('px',''));
});

http://jsfiddle.net/wGMka/で動作を示すために、この jsFiddle を作成しました。

于 2013-08-12T11:48:27.133 に答える