How to provide a shorthand for writing recurring accesses to objects in javascript to style an element?

Question

How to write javascript to style an element in single line? For example,

document.getElementById('add_new').style.top=-15;
document.getElementById('add_new').style.position='absolute';

It is possible to make it array or single line to style the element using javascript itself?

How to provide a shorthand for writing recurring accesses to objects?

I don't understand what you are saying. Are you asking about chaining the style commands? — Ariel, Sep 13 '12 at 04:46
You can write in Jquery as `$('.add_new').css({left: 475, top: 215});`. But for javascript, how to do so? — Justin John, Sep 13 '12 at 04:51
OP, I think you mean single expression. You can have as many expressions as you want on a single line. — Matthew Blancarte, Sep 13 '12 at 04:53
jQuery _is_ JavaScript Justin. Its `.css()` method is simply some JavaScript code that takes that input and applies it appropriately, so you can write your own similar method from scratch - you can even look at the jQuery source to see how it works... — nnnnnn, Sep 13 '12 at 05:04
@nnnnnn: Thank you for your information. I want to know whether this is supported with built-in javscript without adding additional function for that. — Justin John, Sep 13 '12 at 05:40

score 4 · Accepted Answer · edited May 23 '17 at 12:27

4

I don't recommend it, but you could do something like so to get it in "1" line:

with( document.getElementById('add_new').style ) { top=-15; position='absolute'; }

or another way:

element.style.cssText="background: black ; color: blue ; border: 1px solid green"

thanks to Are there legitimate uses for JavaScript's "with" statement?

edited May 23 '17 at 12:27

Community

1
1

answered Sep 13 '12 at 04:51

Matthew Lock

13,144
12
92
130

Thank you. I also never knew JS had that statement!. – Justin John Sep 13 '12 at 05:04
it may seem very nice but it is considered evil, `with` statement that is – Sushil Sep 13 '12 at 05:15
for the pros and cons of with, this discussion is good http://stackoverflow.com/questions/61552/are-there-legitimate-uses-for-javascripts-with-statement – Matthew Lock Sep 13 '12 at 05:25
1

Matthew Lock, kudos for your disclaimer that you're not recommending it. jQuery was created in part to do things like this conveniently. – yitwail Sep 13 '12 at 05:31
Yes I use query for that very reason ;) – Matthew Lock Sep 13 '12 at 06:12

score 3 · Answer 2 · answered Sep 13 '12 at 04:49

3

You can't do this with vanilla JavaScript.

If you were using jQuery, you could use an object:

$('#add_new').css({top: '-15px', position: 'absolute'});

answered Sep 13 '12 at 04:49

Blender

289,723
53
439
496

score 1 · Answer 3 · answered Sep 13 '12 at 04:51

1

Native js don't have something like this but if you using jQuery you can use following code

$('add_new').css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})

answered Sep 13 '12 at 04:51

MichaelT

7,574
8
34
47

score 0 · Answer 4 · answered Sep 13 '12 at 04:50

0

This is the somplest way:

Javascript

document.getElementById("add_new").classList.add('addstyle');

CSS

<style>
.addstyle
{
    top: -15;
    position: absolute;
}
</style>

OR with the JQuery as:

$('.add_new').css({top: '-15px', position: 'absolute'});

answered Sep 13 '12 at 04:50

Vishal Suthar

17,013
3
59
105

1

Note that `.classList` [doesn't seem to be supported](http://caniuse.com/#search=classlist) in IE 9 and older... – nnnnnn Sep 13 '12 at 05:09

score 0 · Answer 5 · answered Sep 13 '12 at 04:52

If you are willing to use jquery you can do it, but that's not completely within scope of the question. You will also have to notate it in the "jQuery" way. Here's a link for reference.

http://api.jquery.com/css/

It might look like:

$("#add_new").css({
    "top": "-15px",
    "position": "absolute"
});

Again, this is not in pure JavaScript as your question indicates. You will need an additional library to make it work.

How to provide a shorthand for writing recurring accesses to objects in javascript to style an element?

5 Answers5