We Keep Coding

CSS styles are applied and displayed but JS doesn't recognize the CSS applied

Something weird is going on and I'm not sure what it is. I created a bunch of elements and I want to get the width of my progress bar so I can work with it in my JS code.
In my JS I do:
var bar = document.getElementById('progressBar');
console.log(bar.style.width); //empty string
however in my CSS I have
#progressBar{
width: 600px;
border: 2px solid black;
}
and I can clearly see the 600px container and the border around it in the browser, but for some reason, JS doens't know about these CSS settings.
Any ideas what the problem might be?
EDIT: This is different from the suggested duplicate - the problem is not that I don't know how to the get the value, the problem is that the style.value doesn't get me what I expect.

That is correct behaviour.
The style property of a DOMElement is responsible for inline styles, not the actual computed values. To get the width, use getClientRects or getBoundingClientRect.
e.g.
var bar = document.querySelector('.bar');
console.log(bar.style.width); // empty string
console.log(bar.getBoundingClientRect().width); // 100px
.bar {
width: 100px;
height: 20px;
background: blue;
}
<div class='bar'></div>
You may also be interested in:
How do I get a computed style?

Add a div on the left side of a any page

I developing a plugin and want to add on any page a div on the left side, like a console.
I saw CSS styles, but testing the plugin on greasymonkey not always show me the div, how can i do?
The CSS code that I'm using is this:
var div_console = document.createElement("div");
div_consola.id = "div_consola";
div_consola.style.cssText = "overflow:scroll;
z-index:300;position:fixed;left:0px; width: auto;
height: 100%; border: solid 1px #e1e1e1;
vertical-align: middle; background: #ffdab9;text-align: center;";
var body = document.getElementsByTagName('body')[0];
body.appendChild(div_consola);
So, when loading any page I add with Javascript this div and then populate with data.
Any help?
Thank you!!

A couple of things:
You have typos in the variable name. I assume you mean div_console and not div_consola
You are assuming that a z-index of 300 will suffice, which may or may not be true. A page could choose to implement a z-index of 301.
Is the rest of your css being applied to the div you wish to affect?

You have specified
overflow: scroll;
width: auto;
Depend of your browser, maybe your div have an undefined size and the scrollbar which pop hide your div.
That's what happened to me when I tried your code on jsFiddle.
Here is the result when I change it to
overflow : hidden;
width: 50px;
JsFiddle
Edit : If it doesn't resolve your problem, could you please precise the conditions (browser, etc) when it doesn't work ?

div_consola.id = "div_consola";
div.setAttribute("id", "div_consola"); <------ Try using setAttribute to set Id.
EDIT:
Using same Id name and variable name is also one of the issue.
When I changed the variable name in your code, it worked fine.
var div_consola = document.createElement("div");
var div = document.createElement("div"); <------ variable name changed

Finding the text that has been hidden due to overflow:hidden?

I have a <div> block that contains an unknown amount of text.
The css for the block is:
.synopsis { width:600px; height:32px; line-height:16px; overflow:hidden; }
In essence the block allows for two lines of text, once the text reaches the block's limits, the rest is hidden from view.
What is the cleanest method to find out what text has been hidden from view? Any jQuery/Javascript functionality that does this?

You can remove the height from the css, or if you want to do this with jQuery you can use in something like this:
$('.synopsis').css('height','auto');

If i've understood you correctly, then a simple way to find the text that's overflowed would be to add a visible background colour and comment out the overflow:hidden on your synopsis class, something along the lines of:
.synopsis {
background: #FF0000;
height: 32px;
line-height: 16px;
/*overflow: hidden;*/
width: 600px;
}
Here a JSFiddle with what I mean: http://jsfiddle.net/UeaBA/4/

I dont think there is any easy way to obtain that in any script. The only way I can think as of now is to get the height and width of each character present in that div. You have to do certain calculations on these metrics to derive which characters fall in the visible area. This would be the most complex to do.

Auto fit CSS attribute to textarea

I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin

It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin

If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

This is not possible with pure CSS, you will need to use JavaScript

Making a DOS-style window in ASP.net

I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?

Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)

I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });

I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}