Change CSS properties on click

Question

I am trying to change the CSS of one element on click of another element  I ve searched a lot but nothing works perfectly  Currently I am using the below code  but it doesn t work  Can anyone tell me what I missed    lt div id  foo  gt hello world  lt  div gt   lt img src  zoom png  onclick  myFunction      gt    function myFunction         document getElementById  foo   style cssText    background-color  red  color  white  font-size  44px

User · Answer

With jquery you can do it like      img   click function            foo   css  background-color    red   css  color    white          this applies for all img tags you should set an id attribute for it like image and then       image   click function            foo   css  background-color    red   css  color    white

User · Answer

In your code you aren t using jquery  so  if you want to use it  yo need something like         foo   css   background-color     red    color     white    font-size     44px       http   api jquery com css   Other way  if you are not using jquery  you need to do      document getElementById  foo   style    background-color  red  color  white  font-size  44px

User · Answer

Try this   CSS   style1      background-color red      color white      font-size 44px      HTML   lt div id  foo  gt hello world  lt  div gt   lt img src  zoom png  onclick  myFunction      gt    Javascript  function myFunction         document getElementById  foo   setAttribute  class    style1

User · Answer

This code seems to work fine  see this jsfiddle   Is your javascript defined before your body  When the browser reads onclick  myFunction    it has to know what myFunction is

User · Answer

Firstly  using on  attributes to add event handlers is a very outdated way of achieving what you want  As you ve tagged your question with jQuery  here s a jQuery implementation   lt div id  quot foo quot  gt hello world  lt  div gt   lt img src  quot zoom png quot  id  quot image quot    gt       image   click function             foo   css            background-color    red            color    white            font-size    44px               A more efficient method is to put those styles into a class  and then add that class onclick  like this   x000D   x000D      image   click function           foo   addClass  myClass        x000D   myClass     background-color  red    color  white    font-size  44px    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt div id  foo  gt hello world  lt  div gt   lt img src  https   i imgur com 9zbkKVz png 1  id  image    gt  x000D   x000D   x000D   Here s a plain Javascript implementation of the above for those who require it   x000D   x000D  document querySelector   image   addEventListener  click        gt      document querySelector   foo   classList add  myClass         x000D   myClass     background-color  red    color  white    font-size  44px    x000D   lt div id  foo  gt hello world  lt  div gt   lt img src  https   i imgur com 9zbkKVz png 1  id  image    gt  x000D   x000D   x000D

User · Answer

Try this       foo   css  backgroundColor  red   color  white  fontSize  44px

User · Answer

lt script gt          function change css                document getElementById  result   style cssText    padding 20px  background-color  b2b2ff  color  0c0800  border 1px solid  0c0800  font-size 22px                   lt  script gt    lt  head gt    lt body gt       lt center gt           lt div id  error  gt  lt  div gt           lt center gt               lt div id  result  gt  lt h2 gt  Javascript Example On click Change Css style lt  h2 gt  lt  div gt               lt button onclick  change css     gt Check lt  button gt  lt br   gt           lt  center gt       lt  center gt   lt  body gt

User · Answer

lt div id  foo  gt hello world  lt  div gt   lt img src  zoom png  id  click me    gt    JS      click me   click function          foo   css        background-color   red        color   white        font-size   44px

[javascript] Change CSS properties on click

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to jquery-ui

Examples related to onclick