index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Border-radius: <input type="range" id="r1" value="0"></p>
<div id="test"></div>
<textarea id="out"></textarea>
</body>
</html>
style.css
#test {
width: 150px;
height: 150px;
background: orange;
margin: 30px;
}
#out {
width: 300px;
height: 150px;
margin: 20px;
font-size: 15px;
}
1.js
// http://css3generator.com/
// Генератор CSS
// Получим ползунок.
document.getElementById('r1').oninput = cssGenerator;
function cssGenerator() {
var div = document.getElementById('test'); // прямоугольник
var out = document.getElementById('out'); // textarea
//console.log(this.value);
div.style.borderRadius = this.value + 'px'; // this - сам элемент, на котором происходит событие
// Нужно вывести запись типа: border-radius: 30px;
out.innerHTML = '-webkit-border-radius: ' + this.value + 'px;\n';
out.innerHTML += 'border-radius: ' + this.value + 'px;';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Border-radius: <input type="range" id="r1" value="0"></p>
<div id="test"></div>
<textarea id="out"></textarea>
</body>
</html>
style.css
#test {
width: 150px;
height: 150px;
background: orange;
margin: 30px;
}
#out {
width: 300px;
height: 150px;
margin: 20px;
font-size: 15px;
}
1.js
// http://css3generator.com/
// Генератор CSS
// Получим ползунок.
document.getElementById('r1').oninput = cssGenerator;
function cssGenerator() {
var div = document.getElementById('test'); // прямоугольник
var out = document.getElementById('out'); // textarea
//console.log(this.value);
div.style.borderRadius = this.value + 'px'; // this - сам элемент, на котором происходит событие
// Нужно вывести запись типа: border-radius: 30px;
out.innerHTML = '-webkit-border-radius: ' + this.value + 'px;\n';
out.innerHTML += 'border-radius: ' + this.value + 'px;';
}
Комментариев нет:
Отправить комментарий