如何使用警报或表单输入来允许用户设置 CSS 参数的值

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

本文关键字：用户 设置 CSS 参数 许用户 何使用 表单 输入      更新时间：2023-09-26

基本上，我想做的是允许用户在按下按钮时的警报中或在按下按钮时使用的表单输入字段中键入值。已输入的数字需要介于 0 和 360 之间。

要更改的 CSS：

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

感谢您的任何帮助。

JSFiddle

使用 prompt 函数并通过 element.css() 分配其返回值 

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

尝试通过javascript或更好的方法是JQuery来更改其样式。您可以创建一个表单并使用 JQuery 方法覆盖其提交按钮，然后从表单的输入中获取一个值，然后将其设置为标记的样式参数。这就够了吗？

这应该会让你到达那里...您将希望对其进行一些处理，并添加一些验证以检查您是否不在学位范围之外。

http://jsfiddle.net/2mDgW/

$('.deg').keyup(function() {
  var str = $(this).val();
  $('.tst').css("-webkit-filter", "hue-rotate("+str+"deg)");
});

提示应该有效例

<button onclick="myAwesomeFunction()">
 Submit CSS
</button>
<script>
function myAwesomeFunction() {
promptVal = prompt("You wanna change the CSS?", "CSS Here");
getElementByClassName("hueshiftFilterEffect").style.whateveryouwanttochangeinstyle = promptVal;
}
</script>

有什么问题吗？:D

相关文章：