Adding CSS code to * with jQuery

Question

I'm trying to add this class with jQuery on a click of a button. I have to add/remove it, can't quite figure out the exact jQuery code for that. Using jQuery 1.12.

Important note - I have to toggle between the current CSS for the focus status, and the changed CSS (border added). This has to happen to all of the elements on the page!

The jQuery code:

$("#button").on('click', function() {
//jQuery Code needed to add the class/style.
}

CSS code:

*:focus {
    border:3px solid black !important;
}

You would need to focus onto the element: `$(this).focus();`. If you want to be able to use these styles with a class name just change your declaration to `*:focus, .do-focus {` then you can use `$(this).addClass('do-focus')` — Kallum Tanton, Mar 03 '17 at 12:18
So "#button" clicked you want to add border to all the elements? — Omprakash Arumugam, Mar 03 '17 at 12:41
Yes, only when the elements are focused! That means I can toggle the focus state of all of the elements on the web page with a button. One time with a border, and one time without. — Yossi, Mar 03 '17 at 13:41

Fred Randall · Answer 1 · 2017-03-03T12:29:36.940

1

I would do:

$("#button").on('click', function() {
   $('div').addClass('focus'); // or toggleClass
}

.focus { 
  border:3px solid black !important;
}

Read more: addClass(), removeClass(), toggleClass()

edited Mar 03 '17 at 12:29

answered Mar 03 '17 at 12:20

Fred Randall

7,544
21
83
184

This would be my ideal solution for this context. – Kallum Tanton Mar 03 '17 at 12:21
I have to do it to all of my elements on the page, when they are focused.. I was considering using $('*').onfocus() – Yossi Mar 03 '17 at 12:22
try $('div:focus').addClass('newclass'); // or toggleClass – Fred Randall Mar 03 '17 at 12:25
also check this: http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery – Fred Randall Mar 03 '17 at 12:31
I don't have the class "element" for all of the tags on the page.. Imagine that I need to overwrite the default behavior of the HTML/CSS for all of the tags, and then bring it back! Now it's buttons, a tags, every focus-able element. – Yossi Mar 03 '17 at 12:31
you should be able to use $('div') tag to access all elements – Fred Randall Mar 03 '17 at 12:32

score 0 · Answer 2 · answered Mar 03 '17 at 12:33

0

.css( propertyName, value ) --> http://api.jquery.com/css/

$("#button").on('click', function() {
   $("holdTheItem").css("border", "12px");
}

answered Mar 03 '17 at 12:33

NewPHPer

233
6
19

score 0 · Answer 3 · answered Mar 03 '17 at 12:40

0

I would only change the class of the body.

document.querySelector('#button').addEventListener('click', function(e) {
   document.body.classList.toggle('-changedFocus');
});

and for the css

body.-changedFocus *:focus {
  // your changes
}

answered Mar 03 '17 at 12:40

cyr_x

13,387
2
31
45

score 0 · Accepted Answer · answered Mar 13 '17 at 09:46

Eventually I used java script to bind the focus event, and used add class/remove class to handle this.

document.addEventListener('focus',function(e){
 var focused = $(':focus');
 focused.addClass('className');
 focused.focusout( function() {
  $(this).removeClass('className');
     });
}, true);

shubham agrawal · Answer 5 · 2017-03-03T12:55:16.813

-2

You can use * selector.

FIDDLE

Here is the code

$("button").on('click', function() {
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
});

h2,
  span,
  p {
    width: 80px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }

   
<div id="test">
  <h2>H2</h2>
  <span>SPAN</span>
  <p>P</p>
</div>
<button>Button</button>

edited Mar 03 '17 at 12:55

answered Mar 03 '17 at 12:36

shubham agrawal

3,035
4
19
31

this is a really bad solution – Fred Randall Mar 03 '17 at 12:48
It can be wrapped in some div to better performance.I have edited the answer.I know it is not the best solution but I replied according to the question – shubham agrawal Mar 03 '17 at 12:52

Adding CSS code to * with jQuery

5 Answers5