0

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;
}
Yossi
  • 1,056
  • 2
  • 13
  • 22
  • 1
    `*` means every element gets a border when focussed. – Mouser Mar 03 '17 at 12:18
  • 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

5 Answers5

1

I would do:

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

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

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

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • 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 – Dr Upvote Mar 03 '17 at 12:25
  • also check this: http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery – Dr Upvote 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 – Dr Upvote Mar 03 '17 at 12:32
0

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

$("#button").on('click', function() {
   $("holdTheItem").css("border", "12px");
}
NewPHPer
  • 238
  • 6
  • 22
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
}
cyr_x
  • 13,987
  • 2
  • 32
  • 46
0

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);
Yossi
  • 1,056
  • 2
  • 13
  • 22
-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>
shubham agrawal
  • 3,435
  • 6
  • 20
  • 31