How to set background-color and border using javascript

Question

I have a script that needs background-color and border filled. CSS should do the trick but a piece of code where I should add the property is javascript. Here's that piece of code... (Sorry guys, I'm not much of a javascript guy. Thanks in advance!!!)

        $(this).find('.slide-tabs li').eq(showIndex).css({
            opacity: 1
            >>>background-color: #fff<<<
            >>>border: 2px solid #ddd<<<
        });

Possible duplicate of [How to change CSS using jQuery?](https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery) — Harry, Jan 06 '18 at 08:22

Kaushal · Answer 1 · 2018-01-06T09:24:50.100

1

you need to enclosed key in double quote if json key contains special chars like -(in background-color) . Otherwise json is wrong. & Javascript throw error. & also if value is string like #fff must enclosed in quote "#fff" in js.

$(this).find('.slide-tabs li').eq(showIndex).css({
    "opacity": 1,
    "background-color": "#fff",
    "border": "2px solid #ddd"
});

edited Jan 06 '18 at 09:24

answered Jan 06 '18 at 08:24

Kaushal

666
6
15

1

You can also use camelCase syntaxe if you have special chars in keys : `.css({ opacity : 1, backgroundColor : "#fff", border : "2px solid #ddd" }). – Joël Hecht Jan 06 '18 at 08:33
@JoelHecht Actually, it's not suppose to be in css. I am suppose to write the background-color: #fff and border: 2px solid #ddd inside the javascript file, and not inside – DaOneRom Jan 06 '18 at 09:17
@Kaushal The way I wrote the codes above is just a thought. I need the correct syntax using javascript. – DaOneRom Jan 06 '18 at 09:19
@Dave Moreno. All answers here are javascript, not css. The ".css" function is part of jquery, the javascript lib that you are also using in your question. – Joël Hecht Jan 06 '18 at 12:46

score 0 · Answer 2 · answered Jan 06 '18 at 08:28

0

If you are using that code directly in a <script> then you need to use document not this. And also you can make use of addClass to add a custom class to the HTML element. Using addClass makes the code manageable and easy to read and modify when you need effect on numbers of CSS properties.

var showIndex = 0;
$(document).find('.slide-tabs li').eq(showIndex).addClass('li-custom');

.li-custom{
    opacity: 1;
    background: #fff;
    border: 2px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<ul class='slide-tabs'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>

answered Jan 06 '18 at 08:28

Ankit Agarwal

30,378
5
37
62

Your answer works but in a different sense. You see, you declare the showIndex=0. Hence, the li-custom stays at the first child of
. The
is from a slider. And I need it to be in-sync with the current or active slide. Thanks for your answer though. Unless you need to help me more...?

DaOneRom

Jan 06 '18 at 08:41

I will be happy to help you further. So you say you want `li-custom` in the `

` that has `active` class in it?

– Ankit Agarwal Jan 06 '18 at 08:43

score 0 · Answer 3 · answered Jan 15 '18 at 08:44

In my dillema to either insert a custom class or modified property using javascript, I've come up with a solution. Instead of bothering to do all those, I decided to do it using css. In my problem, the javascript or jquery that I've used doesn't produced an active class, so there was no way to modify them using css (). Until I've found out that I can modify it after all with css by reconstructing the rule: li[style*="opacity: 1"]{}. So all of the list that starts with that, will proceed to your desired modification.

How to set background-color and border using javascript

3 Answers3