BackgroundImage объект стиля не срабатывает - PullRequest
Новая
       2

BackgroundImage объект стиля не срабатывает

0 голосов
/ 01 мая 2020

Это мой код. Когда я запускаю его, градиент на заднем плане не обновляется. 

<html>
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    	<body style="text-align: -webkit-center;">
    	<div id="coo">
    	<h2 class="display-3">Which color gradient do you want?</h2>
    	<h3 class="display-4" style="font-size:2rem">Color 1:</h3>
    	<input type="text" id="color1" class="form-control" style="width:20%;margin:20px">
    	<h3 class="display-4" style="font-size:2rem">Color 2:</h3>
    	<input type="text" id="color2" class="form-control" style="width:20%;margin:20px">
    	<button onClick="grad(color1,color2)" class="btn btn-secondary" style="width:20%;margin:10px"> Submit </button>
    	<div id="result" role="alert"></div>
    	</div>
    	<script type="text/javascript">
    		function grad(c1,c2){
    			
    			let a=String(c1.value).toLowerCase()
    			let b=String(c2.value).toLowerCase()
    			console.log(a)
    			console.log(b)
    			document.getElementById('coo').style.backgroundImage="linear-gradient(to bottom right, red, yellow);"
    
    		}
    	</script>
    	</body>
    </html>

Я пытался получить аналогичный эффект, как эта ссылка:

https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_diagonal

1 Ответ

1 голос
/ 01 мая 2020

Вы отлично поработали, и я понял, как обновить linear-gradient, используя для этого javascript. Существует только опечатка при обновлении linear-gradient из ;, который находится внутри строкового литерала.

Вы должны исправить опечатку в последнем утверждении -

Из этого - 

document.getElementById('coo').style.backgroundImage="linear-gradient(to bottom right, red, yellow);"

На это - 

const direction = "to bottom right"; // which you can take input from user as drop down 
document.getElementById('coo').style.backgroundImage=`linear-gradient( ${direction} , ${a} , ${b} )`;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...