Calling JavaScript from Function from CSS

Calling JavaScript from function from CSS

No, you can't trigger JavaScript from CSS directly.

What you can do is use CSS selectors to find the elements you want to watch in this way, and then watch for mouse events. The standard events are mouseover and mouseout, but they can be a bit tricky to work with because they bubble (you get mouseout, for instance, whenever the mouse leaves any descendant element). With appropriate logic, though, they're not to bad to work with, and in fact if you have lots of these, you probably want to use mouseover and mouseout rather than the alternative below because you can set them on just a parent container and then work out which descendant element is involved, which can be simpler in some cases (and more complicated in others).

IE provides mouseenter and mouseleave which are much easier to work with because they don't bubble, but (of course) IE-specific. These are so handy that frameworks are starting to support them even in browsers that don't; Prototype and jQuery provide them, for instance, and I wouldn't be too surprised if some other frameworks do as well. jQuery also provides the handy hover function, which would be very close to what you want:

// jQuery
$(".first-nav li a").hover(
    function(event) {
        // The mouse has entered the element, can reference the element via 'this'
    },
    function (event) {
        // The mouse has left the element, can reference the element via 'this'
    }
 );

...which is really just a shortcut for setting up mouseenter and mouseleave handlers, but still, wonderfully concise.

In Prototype it's quite similar:

// Prototype
$$(".first-nav li a")
    .invoke("observe", "mouseenter", function(event) {
        // The mouse has entered the element, can reference the element via 'this'
    })
    .invoke("observe", "mouseleave", function(event) {
        // The mouse has left the element, can reference the element via 'this'
    });

(OT: In both cases, I've used anonymous inline function expressions just to avoid giving the impression you have to use named functions. I always recommend using named functions in production code, though.)

Call a javascript function from CSS

With jQuery, you could do something like:

$('.button').on('mouseup', function(){...});

CSS is a styling language, so you cannot modify the behaviour of HTML elements with it, only their style. If you wish to modify the behaviour, you can use JavaScript.

You could also use an Angular.js Class directive to change the behaviour of all elements with the .button class. But again, this is a JS library and not CSS.

Calling a JavaScript function in CSS

This adjusts automatically as soon as the browser window is being resized, and uses only css:

.purple {  font-size: 10vw;  }

<p class="purple center">Navigation</p>

Call javascript function from style inside div tag

You cannot do this. However, you could change the style from JS though.

var configValue = document.querySelector('.configValue');
configValue.style.left = setLeft();

CSS Button calling a javascript function

attach a click event handler to it using javascript:

document.getElementById("BT1").addEventListener("click", function(){    alert("oh snap, i was clicked...");});

<div class="button" id="BT1">Click me!</div>

Calling a javascript function from a style sheet?

Use clamp for font-size clamp(minimum, preferred, maximum); This will let you set the smallest a font can go, what you would like it to be, and the max it will scale up to.

h1 {
 font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

<h1>Testing CSS clamp with a large H1 tag</h1>

How to call a javascript function with a css button?

Change:

<button class="button button1">Change color2</button>

To:

<button class="button button1" onclick="myFunction();">Change color2</button>

or you can run jQuery code to add an event listener:

<script>
 $("button.button").click(function(){
  myFunction();
 });
</script>

Is there a way to execute javascript from inside a css file ?

IE and Firefox both contain ways to execute JavaScript from CSS. As Paolo mentions, one way in IE is the expression technique, but there's also the more obscure HTC behaviour, in which a separate XML that contains your script is loaded via CSS. A similar technique for Firefox exists, using XBL. These techniques don't execute JavaScript from CSS directly, but the effect is the same.

HTC with IE

Use a CSS rule like so:

body {
  behavior:url(script.htc);
}

and within that script.htc file have something like:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

The HTC file executes the main() function on the event ondocumentready (referring to the HTC document's readiness.)

XBL with Firefox

Firefox supports a similar XML-script-executing hack, using XBL.

Use a CSS rule like so:

body {
  -moz-binding: url(script.xml#mycode);
}

and within your script.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

All of the code within the constructor tag will be executed (a good idea to wrap code in a CDATA section.)

In both techniques, the code doesn't execute unless the CSS selector matches an element within the document. By using something like body, it will execute immediately on page load.

---

Related Topics