jquery: add a style attribute to existing style

Question

Add a style attribute to existing style properties

I have a div element:

<div id="permissions" style="clear: both; float: left;">

I want to set border on onsubmit event:

<div id="permissions" style="clear: both; float: left; border: 1px #F00 solid; ">

Is there a way to do this: Append new style attribute (border) to existing styles (with out reading existing styles)?

Tried anything yet? Seems very basic. http://api.jquery.com/css/ — j08691, Apr 28 '14 at 02:36
I am a jquery newbie. I have tried $('#persmissions').attr('style', '...') but dint work. I thought $('#permissions').css() will do the same. I Google'd but dint find examples for my case and not here either so I've asked this question. — Sharath, Apr 28 '14 at 04:18

acarlon · Accepted Answer · 2014-04-28T02:47:28.623

7

As an alternative to manipulating the style directly you could have a css class:

.submitted
{
    border: 1px #F00 solid;
}

Then using jQuery:

$('#permissions').addClass('submitted');

Then to remove:

$('#permissions').removeClass('submitted');

Then if you want to reuse the same approach elsewhere, you can just use the submitted class. Also if you want to extend the class (e.g. change the color) you can just edit the submitted class.

edited Apr 28 '14 at 02:47

answered Apr 28 '14 at 02:41

acarlon

16,764
7
75
94

This is not what the OP asked for and should not be the accepted solution, see the answer by "lolcaks" below. – DanielT Jan 25 '23 at 14:23

score 4 · Answer 2 · answered Apr 28 '14 at 02:40

4

You can use the css() method of jquery:

$('#permissions').css('border','1px #000 dashed');

answered Apr 28 '14 at 02:40

lolcaks

126
3

It would be great if you could show us how to remove the added style, like acarlon did in its solution! – aldemarcalazans May 29 '17 at 19:11
This should be the accepted answer to "jquery: add a style attribute to existing style" because that is exactly what this is doing, not adding classes. I needed the exact style added to my style attribute, but using $('#permissions').attr('style',"border: 1px #000 dashed"); replaced my existing styles, where $('#').css(' – DanielT Jan 25 '23 at 14:16
@aldemarcalazans, the OP did not ask for that, but you can get that answer here: https://stackoverflow.com/questions/4036857/how-can-i-remove-a-style-added-with-css-function – DanielT Jan 25 '23 at 14:21

score 2 · Answer 3 · answered Oct 22 '18 at 06:54

You can add style to existing style or override existing style like this.

var style =$('#permissions').attr('style'); //it will return string
//on submit update style as
style += ';border: 1px #F00 solid;';
$('#permissions').attr('style',style);

It will not affect your existing style and will add your new style to existing one even if you'll have to override any other property as well.

score 1 · Answer 4 · answered Apr 28 '14 at 02:40

1

Sure:

$('#permissions').css({
  borderWidth: 1,
  borderColor: '#fff',
  borderStyle: 'solid'
});

JS Fiddle.

answered Apr 28 '14 at 02:40

James Hafner

478
2
6

It would be great if you could show us how to remove the added style, like acarlon did in its solution! – aldemarcalazans May 29 '17 at 19:12

score 0 · Answer 5 · edited Apr 28 '14 at 02:49

0

You can do this:

$('form').submit(function(){
  $('#permissions').css("border","1px #F00 solid");
});

edited Apr 28 '14 at 02:49

JohnnyHK

305,182
66
621
471

answered Apr 28 '14 at 02:38

Amit Joki

58,320
7
77
95

1

It would be great if you could show us how to remove the added style, like acarlon did in its solution! – aldemarcalazans May 29 '17 at 19:12
@aldemarcalazans if you want to remove a style, then you can reset it using `.css()` again, with a new appropriate value. `unset`, `none`, `auto` or 0 – Pars Sep 24 '21 at 20:50

jquery: add a style attribute to existing style

5 Answers5