帶有漸變邊框的javascript

-1

我需要爲javascript中的圓形div設置邊框顏色。用戶選擇兩種顏色（例如紅色和藍色），邊框在頂部變爲紅色，在底部變爲藍色。但是從側面看，邊界應該從紅色變爲藍色，反之亦然。換句話說，我需要爲div的邊框製作垂直漸變。我可以只用CSS，但因爲我不知道選擇哪種顏色，所以我需要javascript來爲我做。帶有漸變邊框的javascript

來源

2017-04-03 Nikolay S

請給出你試過的東西 – brk

對不起，這不是StackOverflow的工作方式。形式問題「我想做X，請給我提示和/或示例代碼」被認爲是題外話。請訪問[幫助中心]（http://stackoverflow.com/help）並閱讀[如何提問]（http://stackoverflow.com/help/how-to-ask），尤其是閱讀爲什麼是[「有人可以幫我嗎？「不是一個真正的問題嗎？]（http://meta.stackoverflow.com/questions/284236/why-is-can-someone-help-me-not-an-actual-question） – bc004346

一個純粹的JavaScript解決方案來做到這一點。請注意，您需要做一個時髦的getCssValuePrefix來確定哪個瀏覽器，從而調用適當的線性梯度函數。

var clicky = document.getElementById("changeButton"), 
 
    color1 = document.getElementById("color1"), 
 
    color2 = document.getElementById("color2"), 
 
    changeDiv = document.getElementsByClassName("foo")[0]; 
 

 
clicky.addEventListener("click", function(evt){ 
 
    evt.preventDefault(); 
 
    if (color1.value && color2.value) { 
 
    var myGradientString = getCssValuePrefix()+"linear-gradient("+color1.value+", "+color2.value+")"; 
 
    
 
    changeDiv.style.background = myGradientString; 
 
    } 
 
}); 
 

 
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; 
 
}

.foo { 
 
    border: 1px solid black; 
 
    background-image: linear-gradient(red, blue); 
 
} 
 
label { 
 
    display: block; 
 
}

<div class="foo"> 
 
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh.</p> 
 
</div> 
 
<label for="color1">Color 1: <input type="text" name="color1" id="color1" value="#ee3"></label> 
 
<label for="color2">Color 2: <input type="text" name="color2" id="color2" value="#336"></label> 
 
<button id="changeButton">Make it so!</button>

來源

2017-04-03 16:52:17 Snowmonkey

我覺得這是工作，你究竟是如何想的最佳解決方案:)我已經嘗在Chrome，MF和Opera。將我的演示粘貼到空html文件。祝你好運！

<!DOCTYPE html> 
    <html> 

    <head> 
     <title></title> 
    </head> 
    <style> 
    #test 
     { 
      width: 300px; 
      height: 300px; 
      border-width: 3px; 
      border-style: solid; 
      border-image: 
      linear-gradient(blue, red) 1; 

    } 

    </style> 

    <body> 
    <input id="first" type="text"> 
    <input id="second" type="text"> 
    <input type="submit" onclick="changeColor()"> 

    <div id="test"> </div> 

<script> 

     var one = document.getElementById("first"); 
     var two = document.getElementById("second"); 
     var testDiv = document.getElementById("test"); 

function changeColor() 
      { 
      testDiv.style.borderImage = "linear-gradient(" + one.value + ", " + two.value + ") 1 "; 
      } 

</script> 

</body> 

</html>

來源

2017-04-03 17:33:08 5ka

帶有漸變邊框的javascript

回答

相關問題