เพื่อให้ได้สีพื้นหลังและสีแบบอักษรของหน้าเว็บวิธีการดังต่อไปนี้:
ความคิด: สิ่งที่ควรค่าแก่การได้รับแอตทริบิวต์สีคือสี RGB ซึ่งไม่ใช่สิ่งที่เราต้องการดังนั้นเราต้องเปลี่ยนสี RGB เป็นสีหกเหลี่ยมและได้รับสี RGB ก่อน:
การคัดลอกรหัสมีดังนี้:
var rgb = document.getElementById ('color'). style.backgroundColor;
รูปแบบได้รับดังนี้: RGB (225, 22, 23);
การคัดลอกรหัสมีดังนี้:
var rgb = rgb.split ('(') [1]; // อาร์เรย์ที่มีความยาว 2 หลังจากแยก
จากนั้นแยกสตริง (225, 22, 23) (หมายเหตุ: เฉพาะประเภทตัวเลขเท่านั้นที่สามารถแปลงได้ดังนั้นให้ใช้ ParseInt เพื่อโยนประเภท!):
การคัดลอกรหัสมีดังนี้:
สำหรับ (var k = 0; k <3; k ++) {
str [k] = parseint (rgb .split (',') [k]). toString (16); // str array บันทึกข้อมูลแยก
-
ชุดสุดท้าย:
การคัดลอกรหัสมีดังนี้:
str = '#'+str [0]+str [1]+str [2];
รหัสทั้งหมดมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> gethexcolor js/jQuery รับ hex color </title>
<meta charset = "utf-8" />
<script type = "text/javascript">
ฟังก์ชั่น gethexbgcolor () {
var str = [];
var rgb = document.getElementById ('color'). style.backgroundColor.split ('(');
สำหรับ (var k = 0; k <3; k ++) {
str [k] = parseint (rgb [1] .split (',') [k]). toString (16);
-
str = '#'+str [0]+str [1]+str [2];
document.getElementById ('color'). innerhtml = str;
-
ฟังก์ชั่น gethexcolor () {
var str = [];
var rgb = document.getElementById ('color'). style.color.split ('(');
สำหรับ (var k = 0; k <3; k ++) {
str [k] = parseint (rgb [1] .split (',') [k]). toString (16);
-
str = '#'+str [0]+str [1]+str [2];
document.getElementById ('color'). innerhtml = str;
-
</script>
<style type = "text/css">
#สี{
ความกว้าง: 200px;
ความสูง: 200px;
ความสูงบรรทัด: 200px;
TEXT-ALIGN: CENTER;
-
</style>
</head>
<body>
<div style = "สี: #88EE22; พื้นหลังสี: #ef8989;"
<อินพุต onclick = "gethexbgcolor ();" type = "button" value = "getbackground color"
<อินพุต onclick = "gethexcolor ();"
</body>
</html>