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") 用于类或 $("#name") 用于 ID

于 2013-08-12T11:45:22.777 回答
0

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

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

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

于 2013-08-12T11:48:27.133 回答
0

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

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

于 2013-08-12T12:14:30.410 回答