How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]


Tags: javascript,jquery,html,css

Problem :

Basically what I want to do is allow a user to type in a value either in an alert on the press of a button, or in a form input field which is used on a button press. The number which has been input needs to be between 0 and 360.

CSS to be changed:

.hueshiftFilterEffect{
    -webkit-filter: hue-rotate(0deg); 
}

Thanks for any help.



Solution :

JSFiddle

Use the prompt function and assign its return value via element.css()

$('#btn').click(function(e){
    var w=prompt("Enter new hue:","");
    $('#box').css('-webkit-filter','hue-rotate('+w+'deg)');
});

    CSS Howto..

    How to make CSS (or JS?) hideable help bar

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How can I force a css flex child to be the only on its row?

    How to override margin and right/left in css?

    How to make div's width fit content not window

    how to apply css to a particular asp.net table?

    How to create dynamic CSS based on user input

    How to get css3 ribbon on both sides of element

    How to make custom shape div, or manipulate divs

    css resize: How to resize a dynamic growing div after max height is active

    How to read this hover syntax in css?

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How to completely remove borders from HTML table

    How to implement a webpage with tabs in my case?

    How to style an input that is a type=“button”?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How to solve CSS background transparency?

    How do I find space between lines in HTML?

    How to blend an image with a solid colour in CSS?

    How can i inherit properties from the css id rule to the css class?

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    how to make css curve box with gradient & shadow

    How to align a label to the “BOTTOM” of a div in CSS?

    How to create header numbers with CSS

    How do I get IE to display CSS DIV tables properly?

    How to use `attr` when not on `content` property [duplicate]

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How to make semi-transparent select2?

    How to use add/subtract in css propert?

    CSS Help - How can a DIV ignore css previously set on the page?