If you want to access the effective style of an element (including the globally defined CSS), use getComputedStyle()
:
function test_1() {
var str=window.getComputedStyle( document.querySelector("#box_1") )
.getPropertyValue ( 'color' );
alert(str);
}
The style
property itself, just refers to the elements style
attribute and the styles you set by using JavaScript. See the respective MDN documentation for details.