0

In javascript, you can easily execute onclick events directly from the html element:

<div onclick="..javascript here.."></div>

I know that you can change the css styles with the <style> tag, but I was wondering if you were able to execute it similarly to the example below:

<div onclick="..css here.."></div>
Deniss M.
  • 3,617
  • 17
  • 52
  • 100
Nicholas Smith
  • 674
  • 1
  • 13
  • 27

3 Answers3

6

if you want to do it purely through css you have to use :active or maybe :focus:

div:hover  { color: red; }  /* mouse-over */
div:active { color: red; }  /* mouse-down (this cause also focus) */
input:focus{ color: red; }  /* got focus (by tab key or mouse-down) */

/* for <a> element: */
a:link    { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */

Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..

Also, if you want to change css class or inline styles, you could do as following:

 <div onclick="this.style['border'] = '2px solid red';">Click me</div>
S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
2

There is, but the element needs to have a tabindex attribute.

With a tabindex on the element you can use:

element:focus {
 /* some_CSS; */
}

'some_CSS' will kick in when the element is clicked.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
allnodcoms
  • 1,244
  • 10
  • 14
  • as i know, the `:focus` is for when the element got focus which is usually by mouse click, but can also be done when user press `Tab` key from previous elements.. you can use `:active` for it as i mentioned in my answer – S.Serpooshan Jan 14 '17 at 08:24
  • @S.Serp - That's true, but `:active` only applies while the mouse button is held down... Both CSS methods have their flaws, shall we agree it is a Javascript problem? ;o) – allnodcoms Jan 14 '17 at 08:28
  • yes, also its useful to check this: [Checkbox Hack](https://css-tricks.com/the-checkbox-hack/) – S.Serpooshan Jan 14 '17 at 08:54
0

You can use javascript to change the style of a div or any other element. But I donot know whether there is a way to change css by onclick event without using javascript.

I can explain my method.

<script>
function change_css(){ 
 document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>

The above code will help you change the style by changing the class, provided you have already created a class with css. It replaces all the previously provided classes for that div and add the new one.

To add an additional class to the div without replacing the existing classes, use the following statement in javascript:

document.getElementById('change_css').className+='  newClassName';
bonyem
  • 1,148
  • 11
  • 20
  • 1
    `className += newClassName` is not guarenteed to work like this. It is string concatenation, so if the original name was `myClass` you could wind up with `myClassnewClassName`. `element.classList.add(newClassName);` is safer for concatenations. – allnodcoms Jan 14 '17 at 08:13
  • There was a space, which I missed to specify, between the className+=' and newClassName'; – bonyem Jan 14 '17 at 08:16
  • Thanks for your notification. – bonyem Jan 14 '17 at 08:17