Menu
HTML:
<a id="postanad" href="postad.php">Make a Post</a>
CSS:
#header #postanad {
position: absolute;
top: 50px;
left: 250px ;
background: #000 url(postad.gif) repeat-x 0% 100%;
font: bold 19px Tahoma, 'trebuchet MS', Sans-serif;
padding: 5px;
}
How do I determine the size in pixels/ems that the div element is taking so that I can make the background image postad.gif to be of the same width?
Just to be clear I don't want to determine the width dynamically , but just want to know how much space it is taking so that I can draw a background image in PS.
531
To measure the width of a div element we will utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels. Return Value: Returns the corresponding element's layout pixel width.
The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of . wrap will be 80% as wide as their parent element.
Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
For rectangular and square containers, measure length (l) and width (w) of the inside lip of the container, and the diameter (d) of the inside lip for circular containers. Don't worry about the depth or shape of the container beneath the lip; it doesn't matter for this area measurement.
If you're comfortable with jQuery, you can just use $("#postanad").width().
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
