使用 JavaScript 编辑 CSS 渐变 [英] Using JavaScript to edit CSS gradient

查看：22 发布时间：2021/12/19 13:35:20 javascript css firefox browser linear-gradients

本文介绍了使用 JavaScript 编辑 CSS 渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在 Firefox 中通过 JavaScript 编辑 CSS 渐变.我有用户可以放置的输入框1. 方向2. 第一种颜色3. 第二种颜色

这里是 html

<头><title>线性渐变控制</title><脚本>函数渲染按钮(){varorientation = document.getElementById("firstValue").value;var colorOne = document.getElementById("firstColor").value;var colorTwo = document.getElementById("secondColor").value;//警报(方向)；//警报(颜色一)；//警报(颜色二)；};<风格>#mainHolder{宽度:500px；背景:-moz-线性渐变(左，绿色，红色)；}</风格><身体><h1>渐变编辑器</h1><表格><input type="text" id="firstValue">orientation</input><br/><input type="text" id="firstColor">第一种颜色</input><br/><input type="text" id="secondColor">第二种颜色</input><br/></表单><button type="button" onclick="renderButton()">Render</button><div id="mainHolder">内容</div>

总结一下，用户将指定他们的 3 个值，这些值将传递给函数renderButton();".我可以使用哪一行来更改 CSS3 渐变的 3 个值，以便用户可以制作自己的自定义渐变框?我假设我只需要一两行.

附言我意识到这个例子只适用于 Firefox.我只想在使用不同的浏览器之前先了解这个概念.

解决方案

从以下内容开始:

var dom = document.getElementById('mainHolder');dom.style.backgroundImage = '-moz-linear-gradient('+ 方向 + ', ' + colorOne + ', ' + colorTwo + ')';

如果您需要支持比 Firefox 更多的浏览器，则需要结合浏览器嗅探或一些类似 Modernizr 的功能检测来完成.

下面是如何做到这一点的示例，使用类似于 Modernizr 的特征检测(在 Firefox、Chrome、Safari、Opera 中测试).

//检测指定 CSS 值使用哪个浏览器前缀//(例如，背景图像:-moz-linear-gradient(...);//背景图像:-o-线性梯度(...);等等).//函数 getCssValuePrefix(){var rtrnVal = '';//默认为标准语法var 前缀 = ['-o-', '-ms-', '-moz-', '-webkit-'];//创建一个临时的 DOM 对象进行测试var dom = document.createElement('div');for (var i = 0; i

I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color



Here is the html 
<html>
    <head>
        <title>Linear Gradient Control</title>
        <script>
            function renderButton(){ 
            var orientation = document.getElementById("firstValue").value;
            var colorOne = document.getElementById("firstColor").value;
            var colorTwo = document.getElementById("secondColor").value;
            //alert(orientation);
            //alert(colorOne);
            //alert(colorTwo);

            };
        </script>
        <style>
            #mainHolder
            {
            width:500px;
            background: -moz-linear-gradient(left,  green,  red);

            }
        </style>
    </head>
    <body>
        <h1>Gradient Editor</h1>
        <form>
            <input type="text" id="firstValue">orientation</input><br />
            <input type="text" id="firstColor">first color</input><br />
            <input type="text" id="secondColor">second color</input><br />
        </form>
        <button type="button" onclick="renderButton()">Render</button>
        <div id="mainHolder">Content</div>
    </body>
</html>
So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need. 

P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers. 
 解决方案 
Start with something like the following:
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';
If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.

Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).
// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
//        background-image:   -o-linear-gradient(...); etc).
//

function getCssValuePrefix()
{
    var rtrnVal = '';//default to standard syntax
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    // Create a temporary DOM object for testing
    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        // Attempt to set the style
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';

        // Detect if the style was successfully set
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}

// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';


                        
这篇关于使用 JavaScript 编辑 CSS 渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

使用 JavaScript 编辑 CSS 渐变 [英] Using JavaScript to edit CSS gradient

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 JavaScript 编辑 CSS 渐变 [英] Using JavaScript to edit CSS gradient

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭