Question

我需要获得具有class =“btn-default”

的按钮元素的确切宽度（浏览器显示的宽度，可以使用inspect元素或此类工具看到）

以下是代码：

我试过了：

  $('.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]

Answer 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”）

Answer 2

非常奇怪的行为。它可能取决于浏览器为按钮标签提供默认填充。这是一个讨厌的解决方法，但它有效...

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

创建了一个jsFiddle来显示http://jsfiddle.net/wGMka/

的行为

Answer 3

问题是我的脚本是在document.ready函数中，当时可能没有设置某些属性，我将其更改为window.load并且工作得很好......

感谢所有人的努力和时间，这意味着很多

jQuery按钮元素的宽度

3 个答案: