AARRGGHHH Posted April 2, 2018 Share Posted April 2, 2018 (edited) Hello I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas. I tried this: var hue = document.getElementById('canvas1').style.filter('hue-rotate'); and it did not work, several variations on that theme also failed. What is the correct syntax? Thank you very much PS: this could apparently also work var hue = getComputedStyle(canvas1).filter But it will not retrieve just the hue. Thank you Edited April 2, 2018 by AARRGGHHH More Info Link to comment Share on other sites More sharing options...
justsomeguy Posted April 2, 2018 Share Posted April 2, 2018 I would suggest using your browser's developer tools to look at the actual properties of the actual element, then you don't have to guess. You can right-click on it and choose Inspect Element in most modern browsers. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 3, 2018 Author Share Posted April 3, 2018 Yes, I understand that process, that wasn't really the question. The reason I'm guessing is that I don't know the answer. Is there a way to retrieve just the hue value (or just the saturation value) etc... I'm guessing that such a command exists, but I do not know what it is. Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2018 Share Posted April 3, 2018 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0"> <title>Document Title</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style> img#myImg { width: 260px; filter: hue-rotate(90deg); } </style> </head> <body> <img id="myImg" src="https://www.w3schools.com/cssref/pineapple.jpg" style="filter: hue-rotate(90deg);"> <script> var elem = document.getElementById('myImg'); var hue = elem.style.filter.replace(/\D/g, ''); alert('From inline: ' + hue); var huecss = window.getComputedStyle(elem, null).getPropertyValue("filter").replace(/\D/g, ''); alert('From internal: ' + huecss); </script> </body> </html> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 3, 2018 Share Posted April 3, 2018 The reason I'm guessing is that I don't know the answer. And how do you figure out which properties are available on an element? Wouldn't it make sense to inspect the element and see an actual, live, list of all properties and their values? Doesn't that sound better than guessing? I don't know the answer to your question either, I don't think there are many people who go around with the complete documentation in their mind, so if I were to answer your question the first thing I would do would be to inspect the element and see what properties it actually has. So, might as well skip the middle man and teach you how do you that yourself. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now