按钮元素的jQuery宽度答案

【问题标题】：jQuery width of a button element按钮元素的jQuery宽度
【发布时间】：2013-08-12 20:14:30
【问题描述】：

我需要获取具有 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]

【问题讨论】：

$(this).width() 不工作？
令人惊讶的是没有！它显示了不同的价值，已经好几个小时了，我已经筋疲力尽了！
你能在jsfiddle中添加你的代码吗！
我不太确定，但我认为如果它是input 类型标签，我认为DOM 元素在某种程度上被操作系统/浏览器的元素类型渲染所取代。您可能想检查元素的 rendered 宽度...
你的脚本在哪里？在 DOM 元素之前还是之后？它是否包含在 $(function(){ ... }); 中？ $(value).outerWidth() 无论如何都应该可以正常工作。

标签： jquery dom

【解决方案1】：

试试这个：

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

您使用 $(".name") 作为类或 $("#name") 作为 ID

【讨论】：

你用的是jQuery，应该不用onclick。

【解决方案2】：

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

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

为此创建了一个 jsFiddle 以显示 http://jsfiddle.net/wGMka/ 处的行为

【讨论】：

这只是向我展示了我的最新结果，无论如何感谢您的努力
亲爱的，这就是你错的地方：width() 只返回元素的宽度，不考虑填充和边框，但如果你执行 outerWidth() 它会成功并返回宽度 + 填充和边框。 .. 这是你对我的编辑的小提琴：jsfiddle.net/NeECP

【解决方案3】：

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

感谢大家的努力和时间，这意味着很多

【讨论】：