Accessing ids of external css file in javascript

Question

I've a line of code like this:

 htmlcontent =  htmlcontent+'<div class="checkbox" id="chkpos[j]">'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>';

And ids in external css are like this:

            #chkpos1{
                /*position: relative;*/
                margin-top: 8%;   
            }
            #chkpos2{
                /*position: relative;*/
                margin-top: 26%;   
            }
            #chkpos3{
                /*position: relative;*/
                margin-top: 17%;   
            }

How can I make that javascript code ('<div class="checkbox" id="chkpos[j]">') access those ids?
Any ideas?

What do you mean by using JS to "access those ids"? JS is mostly used to access DOM elements, not to access CSS rules. Please state your question in a clearer way. — light
– light, Commented Jun 19, 2015 at 10:13
htmlcontent = htmlcontent+'<div class="checkbox" id="chkpos'+j+'">'; — Bhuvana
– Bhuvana, Commented Jun 19, 2015 at 10:18

James · Accepted Answer · 2015-06-19 10:24:03Z

3

If you want to use Ids in your CSS (though I recommend using classes instead like Cerbrus said) set your Id like this:

htmlcontent =  htmlcontent+'<div class="checkbox" id="chkpos' + j + '">'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>';

You can't use [ ] brackets in css as Ids as CSS uses these for attributes (such as input[type=text]).

Like I said though, I'd recommend using classes, so in your JS:

htmlcontent =  htmlcontent+'<div class="checkbox chkpos chkpos' + j + '">'+ //etc...

CSS:

.chkpos {
    /*position: relative;*/
}
.chkpos1 {
    margin-top: 8%;   
}
.chkpos2 {
    margin-top: 26%;   
}
.chkpos3 {
    margin-top: 17%;   
}

answered Jun 19, 2015 at 10:24

James

8182 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ajay Kulkarni Over a year ago

It should be htmlcontent = htmlcontent+'<div class="checkbox chkpos' + j + '">'+ //etc..., right?

James Over a year ago

I added the extra chkpos class so that you can give common css rules to all of these checkboxes such as in .chkpos { /*position: relative;*/ }

Cerbrus · Accepted Answer · 2015-06-19 11:15:01Z

1

[] are invalid characters for element id's (or classes), as they're used in CSS for attributes.

Use classes instead:

htmlcontent = htmlcontent +
    '<div class="checkbox" class="chkpos pos' + j + '">' + 
        optionAlpha +
            '<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>' +
                option +
            '</label>' +
        htmloptionImage +
    '</div>';

CSS:

.chkpos {
    /*position: relative;*/
}
.chkpos.pos1 {
    margin-top: 8%;   
}
.chkpos.pos2 {
    margin-top: 26%;   
}
.chkpos.pos3 {
    margin-top: 17%;   
}

edited Jun 19, 2015 at 11:15

answered Jun 19, 2015 at 10:10

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

1 Comment

Luca Over a year ago

class names like .1, .2 .3 are also invalid. A name must begin with an underscore (_), a hyphen (-), or a letter(a–z)

Kishan · Accepted Answer · 2015-06-19 10:50:51Z

0

avoid [] brackets and i think j use for loop

  htmlcontent =  htmlcontent + "<div class="checkbox" class='chkpos " + j + "'>'+optionAlpha+'<label class="lclass"><input type="checkbox" class="checkbox" name="answer" value='+optionid+'>'+option+'</label>'+htmloptionImage+'</div>";

css

.chkpos {
    /*position: relative;*/
}
.chkpos.1 {
    margin-top: 8%;   
}
.chkpos.2 {
    margin-top: 26%;   
}
.chkpos.3 {
    margin-top: 17%;   
}

edited Jun 19, 2015 at 10:50

answered Jun 19, 2015 at 10:18

Kishan

1,21014 silver badges26 bronze badges

3 Comments

Ajay Kulkarni Over a year ago

Does ` id='chkpos " + j + '` access .chkpos.1?

Kishan Over a year ago

yes it access because i use "chkpos " space given between text and j

Kishan Over a year ago

sorry for i am not change id attribute to class

Collectives™ on Stack Overflow

Accessing ids of external css file in javascript

3 Answers 3

2 Comments

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Related