CODEWITHSUNDEEP
javascriptjquerycss
JohnyFree
JohnyFree

Reputation: 1369

jquery update border color without overwriting border-left-color

I have element with this css:

border: 20px solid;
border-color:#4ea88e;
border-right-width: 10px; 
border-left-color: transparent;

I want to update with javascript border-color without overwriting border-left-color. Is that possible without hacks? If I try this:

$("#myElement").css('border-color','#ffffff')

It will update also border-left-color.

Upvotes: 0

Views: 223

Answers (4)

Bad Hombre
Bad Hombre

Reputation: 594

Easy little trick with css

#el {
   border: 20px solid;
   border-color:#4ea88e;
   border-right-width: 10px; 
   border-left-color: transparent !important;
}

Edit: I don't understand how this is not working:

$(document).ready(
   $('#el').css('border-color','#111'); // or any other color for that matter
});

https://jsfiddle.net/6rk08kfL/

I don't condone the abuse of the !impotant since it may not always be considered as a must but often times, applying a different style to a smaller group of a certain class of elements should be possible.

Therefore I think the !important rule here comes in handy when overriding the style changes made by JavaScript.

Upvotes: -1

Junius L
Junius L

Reputation: 16142

Use an object in .css()

$("#myElement").css({
        'border-top-color': '#000',
        'border-top-style': 'solid',
        'border-right-style': 'solid',
        'border-bottom-style': 'solid',
        'border-right-color': '#abc',
        'border-bottom-color': 'green',
    });

See Example below

$('#test').on('click', function () {
        $("#myElement").css({
            'border-top-color': '#000',
            'border-top-style': 'solid',
            'border-right-style': 'solid',
            'border-bottom-style': 'solid',
            'border-right-color': '#abc',
            'border-bottom-color': 'green',
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test</button>
<div id="myElement" style="width: 200px; height: 200px; background-color: yellow"></div>

Upvotes: 1

Alen.Toma
Alen.Toma

Reputation: 4870

Try this...

var orgBorderColor= $("#myElement").css("border-color");
$("#myElement").css('border-color','#ffffff');
$("#myElement").css('border-left-color',orgBorderColor);

Upvotes: 1

sandrooco
sandrooco

Reputation: 8756

Use normal class attributes - jQuery's .css isn't that great with performance.

$("#myElement").addClass("datBorder");

CSS:

.datBorder {
    border-color: #4ea88e;
    border-left-color: #ffffff;
}

Upvotes: 1

Related Questions