Bug Tracker

Modify

Ticket #7283 (closed bug: worksforme)

Opened 3 years ago

Last modified 2 years ago

jQuery 1.4.3 .css("width") gets scrollWidth

Reported by: xotic750@… Owned by: john
Priority: blocker Milestone: 1.4.4
Component: css Version: 1.4.3
Keywords: regression Cc:
Blocking: Blocked by:

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

comment:1 Changed 3 years ago by xotic750@…

Link to 1.4.2 example on jsFiddle  http://jsfiddle.net/AvuUA/

Link to 1.4.3 example on jsFiddle  http://jsfiddle.net/gM8fJ/

comment:2 Changed 3 years ago by rwaldron

  • Component changed from unfiled to css

comment:3 Changed 3 years ago by rwaldron

  • Priority changed from undecided to high
  • Status changed from new to open
  • Milestone changed from 1.5 to 1.4.4

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 3 years ago by john

  • Owner set to john
  • Status changed from open to assigned

comment:5 Changed 3 years ago by snover

  • Keywords regression added
  • Priority changed from high to blocker

comment:6 Changed 3 years ago by snover

comment:7 Changed 3 years ago by john

  • Status changed from assigned to closed
  • Resolution set to worksforme

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 3 years ago by Xotic750

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 3 years ago by boecko

this is definitely the desired result now


  • I think it's wrong to change the expected result between minor versions.
  • a cleaner solution would be:

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.

  1. 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;
    };
Last edited 3 years ago by boecko (previous) (diff)

comment:10 Changed 3 years ago by anonymous

I have the same problen with jquery 1.4.4. How can i get real css atrr?

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.