0

There is a fixed toolbar at the top of the page by default with "hide" button. When user clicks the hide button, the toolbar hides.

When user hovers over the top of the page, toolbar shows up transparent'ly with "show" button. when user clicks "show", the toolbar shows up like before.

I see that show and hide is done using "display:show/hide" property. But i see that this property shows up under "element.style" section of developer tool. Does this mean that the style was injected in javascript/jQuery using the style/.css() method? OR does this mean anything else?

3
  • 1
    There is no “.css() method” in JavaScript. If you are referring to the jQuery method (or that of any other framework) – yes, those usually manipulate the style of an element directly (via the .style attribute), same as .show/.hide, and that counts as an element style.
    – CBroe
    Apr 13, 2015 at 9:25
  • display:show/hide ? Apr 13, 2015 at 9:26
  • Oh yes....I meant jQuery!!!
    – gopal rao
    Apr 13, 2015 at 9:30

1 Answer 1

2

No it's most likely to achieved via HTML Element style.

You often want to use the "element style" directly because it's the styling "anchor" with the highest priority:

  1. Element.style
  2. id

  3. .class

Check this example:

function onClick(){
  document.getElementById("hello").style.display =     "None";
}
<div id="hello">Hello World!</div>
<button onclick="onClick()">Click Me</button>

HTML section:

We've added two kind of components. The first is a simple "DIV". It has initially the style "display: block".

The second component is a button. We execute the function "onClick()" if we click it.

JS section

As soon as the "onClick()" function is executed we get the div with the id "hello" via document.getElementById("hello"). Now we are able to set the "display" style to "None". None makes the element disappear ("display: none").

Even if you do this via jQuery's show/hide functions it would just result in the "display: none/block" style.

8
  • I did not get what you said.Can you pls explain a little more.
    – gopal rao
    Apr 13, 2015 at 9:32
  • Right, so what you say, is that the styles appearing under element.style is always coming from javascript/jquery/(any other script) injected styling...(not via a addclass kindof) right?
    – gopal rao
    Apr 13, 2015 at 9:34
  • Most likely, yes. But you have to consider one thing: it's always possible to write the "style" things in the initial markup. So you can style your elements just in your "html section". However, your case can only be solved with a script. Another hint: be aware that jQuery is only a framework for Javascript not another language.
    – OddDev
    Apr 13, 2015 at 9:39
  • Thanks, thats right. could be injected directly from html. One thing i found now is that under the "Network" tab, when i click the show or hide button, I don't see any request going? Is there a way to exactly get hold of the file where the show/hide is taken care of?
    – gopal rao
    Apr 13, 2015 at 9:46
  • Puh that's sort of complicated. You are able to add watch expressions to the "Firefox Developer Tools Debugger" (don't know if there is a similar function in Chrome). developer.mozilla.org/en-US/docs/Tools/Debugger
    – OddDev
    Apr 13, 2015 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.