firefox 中的样式属性

Question

i am using a piece of code in js as:-

span_1.style.width = '30%'

input_1.style.width = '40%';

td_1.style.cursor = 'hand';

where span_1 , input_1 , td_1 are span , input , td objects, resp.

All are not working in firefox?Any suggestions...

Answer 1

not quite sure, but I guess you'll have to display them as 'block' first, since spans are inline-elements. Also, the parent element should have a width set.

so in css: display: block;

//edit:

display: inline-block;

may even be better.

Answer 2

Some browsers put all elements with an id as properties in the window object so that you can access them directly, but this is not a web standard. Use the getElementById method to access elements:

document.getElementById('span_1').style.width = '30%';

document.getElementById('input_1').style.width = '40%';

document.getElementById('td_1').style.cursor = 'pointer';

Answer 3

First: the hand value for cursor is Microsoft's proprietary implementation of what every other browser calls pointer. I think you have to go back to IE5 to find an IE that doesn't support pointer so use that instead.

If you want to support browsers that don't understand pointer then change the .className instead and have a style predefined:

.foo { 
    cursor: hand;
    cursor: pointer;
}

Second: The width property does not apply to display: inline elements (which a <span> is by default). IE may get this wrong in quirks mode, which leads to many inconsistances. Make sure you are in standards mode .

If you are using a span, then change it to a block element, or style the display so it isn't inline (eg display: inline-block; ).

Third: You don't specify how you get the reference to the elements in the respective variables. IE has a tendency to splurge global variables that match the id of any given element. This is non-standard and can't be relied upon. Make sure you get proper references. eg

var span_1 = document.getElementById('span_1');