5
Để HTML code này:Làm cách nào để đặt chiều rộng (tính bằng pixel) của thanh trượt đầu vào?
<div>
<code>/range/1-3</code><br />
<input type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
<input type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
<input type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
</div>
Tôi muốn thêm một số CSS trong phần đầu của tập tin HTML của tôi để thiết lập chiều rộng của các tầng lớp nhất định trượt.
Đây là liên kết đến toàn bộ tệp bao gồm 3 định nghĩa CSS và JS ngắn để truyền các giá trị vào và ra khỏi thanh trượt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8">
var ws = null
window.addEventListener('load', function() {
if ('WebSocket' in window) {
ws = new WebSocket('ws://localhost:60001')
ws.onmessage = function(e) {
var m = JSON.parse(e.data)
if (m) {
var e = document.getElementById(m[0])
if (e)
e.value = parseInt(m[1] * 100)
}
}
}
})
function send(k, v) {
var m = JSON.stringify([k, v])
if (ws && ws.OPEN)
ws.send(m)
if (console)
console.log(m)
}
</script>
<style type="text/css" media="screen">
div {
margin-bottom: 1em;
}
code {
color: gray;
}
.slider-width {
width: 100px;
}
</style>
</head>
<body>
<div>
<code>/qc/lfo/1</code><br />
<input id="/qc/lfo/1" type="range" />
</div>
<div>
<code>/range/1-3</code><br />
<input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
<input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
<input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
</div>
<div>
<code>/checkbox/1-3</code><br />
<input type="checkbox" onchange="send('/checkbox/1', this.checked)" />
<input type="checkbox" onchange="send('/checkbox/2', this.checked)" />
<input type="checkbox" onchange="send('/checkbox/3', this.checked)" />
</div>
<div>
<code>/radio/1</code><br />
<input type="radio" name="/radio/1" value="1" onchange="send('/radio/1', 1)" />
<input type="radio" name="/radio/1" value="2" onchange="send('/radio/1', 2)" />
<input type="radio" name="/radio/1" value="3" onchange="send('/radio/1', 3)" />
</div>
<div>
<code>/text/1</code><br />
<input type="text" name="/text/1" onkeyup="send(this.name, this.value)" />
</div>
<div>
<code>/select/1</code><br />
<select name="/select/1" onchange="send(this.name, this.value)">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
</div>
<div>
<code>/button/1</code><br />
<input type="button" name="/button/1" value="button" onmousedown="send(this.name, true)" onmouseup="send(this.name, false)" onmouseout="send(this.name, false)" />
</div>
</body>
</html>
Khi tôi sử dụng kiểu này bên trong tệp HTML, nó hoạt động tốt. Khi tôi đưa vào tập tin bên ngoài nó không hoạt động. Không thể tập luyện tại sao, CSS đang tải vì các thay đổi kiểu màu văn bản hoạt động. Tôi có thể làm gì sai? –
Bạn đã xóa thuộc tính "trả lời" khỏi câu trả lời của tôi. Bạn có thể cho tôi biết tại sao và vấn đề là gì? –
Bạn có chắc chắn quy tắc được đưa vào cùng một CSS mà bạn đã liên kết thành công với trang không? Bạn có chắc chắn không có quy tắc CSS nào khác ghi đè quy tắc này vì ưu tiên cao hơn không? Ngoài ra, nếu điều này làm việc trong HTML của bạn thì chúng tôi có thể nói chắc chắn rằng các vấn đề của bạn không bắt nguồn từ quy tắc này, bởi vì nó hoạt động. Bạn có thể kiểm tra điều này bằng cách tạo tệp CSS chỉ chứa quy tắc này và chỉ liên kết tệp này với HTML của bạn. Đây sẽ là bằng chứng về khái niệm. –