#7283 closed bug (worksforme)
jQuery 1.4.3 .css("width") gets scrollWidth
| Reported by: | Owned by: | john | |
|---|---|---|---|
| Priority: | blocker | Milestone: | 1.4.4 |
| Component: | css | Version: | 1.4.3 |
| Keywords: | regression | Cc: | |
| Blocked by: | Blocking: |
Description
I have just upgraded to jQuery 1.4.3 (previously using 1.3.2 and 1.4.2) and I'm finding that when I use
.css("width")
it is actually returning the scrollWidth. For now I am having to work around the problem by replacing
.css("width")with
.attr("style").match(new RegExp("width:\\s*([\\d\\.]+)%"))[1]
I am using Google-Chrome.
I have searched but have not found an answer.
To qualify what I mean here are two samples that show the difference between 1.4.2 and 1.4.3
1.4.2
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<img src="http://img408.imageshack.us/img408/1723/nmgreen.jpg" style="width: 50%; height: 33px;">
<script type="text/javascript">
document.write($("img[src*='nmgreen.jpg']").css("width"));
</script>
</body>
</html>
Returns the value of 50%
1.4.3
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<img src="http://img408.imageshack.us/img408/1723/nmgreen.jpg" style="width: 50%; height: 33px;">
<script type="text/javascript">
document.write($("img[src*='nmgreen.jpg']").css("width"));
</script>
</body>
</html>
Returns the scrollWidth, e.g. 290px
Change History (10)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
| Component: | unfiled → css |
|---|
comment:3 Changed 12 years ago by
| Milestone: | 1.5 → 1.4.4 |
|---|---|
| Priority: | undecided → high |
| Status: | new → open |
Confirmed - This changes the behavior significantly between versions.
Ex. style="width: 50%"
get with .css("width")
1.4.2 returns 50% 1.4.3 returns a pixel value
comment:4 Changed 12 years ago by
| Owner: | set to john |
|---|---|
| Status: | open → assigned |
comment:5 Changed 12 years ago by
| Keywords: | regression added |
|---|---|
| Priority: | high → blocker |
comment:7 Changed 12 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | assigned → closed |
Based upon the improved test case posted by snover this is definitely the desired result now - it's getting the actual computed width in pixels.
comment:8 Changed 12 years ago by
If this is the desired result as of 1.4.3 then is there another jQuery method for reading the width as the percentage set?
comment:9 Changed 12 years ago by
this is definitely the desired result now
- i think it's wrong to change the expected result between minor versions.
2. a) to introduce a unit converter function (unitInPixels), which can be called if desired b) a cssCurrent - function or something , which reports back the current value in pixels or whatever.
- for mmToPixels i'm using following function to get the dpi
function getDpi() {
var mm = 100000;
var dpitest = $('<div id="dpitest" style="disply:none;width:'+ mm + 'mm;height:10px"/>');
var inch2mm = 25.4;
dpitest.appendTo('body');
var px = dpitest.outerWidth();
var dpi = Math.round(px / (mm / inch2mm) * 1000) / 1000;
dpitest.remove();
return dpi;
};
comment:10 Changed 12 years ago by
I have the same problen with jquery 1.4.4. How can i get real css atrr?
Link to 1.4.2 example on jsFiddle http://jsfiddle.net/AvuUA/
Link to 1.4.3 example on jsFiddle http://jsfiddle.net/gM8fJ/