Home Web Front-end JS Tutorial jQuery gets the background color attribute value/color value in the style_jquery

jQuery gets the background color attribute value/color value in the style_jquery

May 16, 2016 pm 05:46 PM
attribute value background color

When I used jQuery to obtain the value of background-color in the style, I found that the obtained color value was in a different format in IE than in Chrome and Firefox. IE displayed #ffff00 in HEX format, while Chrome and Firefox displayed it as #ffff00. Display rgb(255,0,0) in GRB format. Since the color values ​​need to be stored in the database, we want to unify the format of the color values ​​(in fact, they can be stored if they are not unified). After searching, I got a piece of code from a foreign website

Copy the code The code is as follows:

$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
rgb = rgb.match(/^rgb((d ),s* (d ),s*(d ))$/);
function hex(x) {return ("0" parseInt(x).toString(16)).slice(-2);}
return rgb= "#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]);
}

Solution
What is defined above is a jQuery function. We can get the RGB value of the background-color with tag id="bg" through $("#bg").getHexBackgroundColor();

Let’s do a little The modification is to add a judgment. If it is an IE browser, just get the value directly. If it is a non-IE browser, convert the value into RGB format:
Copy code The code is as follows:

$.fn.getHexBackgroundColor = function() { var rgb = $(this).css('background-color'); if(!$ .browser.msie){ rgb = rgb.match(/^rgb((d ),s*(d ),s*(d ))$/); function hex(x) {return ("0" parseInt(x ).toString(16)).slice(-2);} rgb= "#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]); } return rgb; }

jQuery gets the attribute value in the style sheet
Copy code The code is as follows:


aaaa




< div id="left">





Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust background color settings in Eclipse How to adjust background color settings in Eclipse Jan 28, 2024 am 09:08 AM

How to set background color in Eclipse? Eclipse is a popular integrated development environment (IDE) among developers and can be used for development in a variety of programming languages. It is very powerful and flexible, and you can customize the appearance of the interface and editor through settings. This article will introduce how to set the background color in Eclipse and provide specific code examples. 1. Change the editor background color. Open Eclipse and enter the "Windows" menu. Select "Preferences". Navigate on the left

How to set the background color in editplus-How to set the background color in editplus How to set the background color in editplus-How to set the background color in editplus Mar 04, 2024 pm 07:00 PM

Friends, do you know how to set the background color in editplus? Today I will explain how to set the background color in editplus. If you are interested, come and take a look with me. I hope it can help you. Step 1: First open editplus, click Tools above, as shown in the picture: Step 2: In the tool menu, click preferences, as shown in the picture: Step 3: In the preferences page, click colors on the left, as shown in the picture: Chapter 3 Step 4: In the background position, select a color as needed, as shown in the figure:

Step-by-step guide to changing background color with Eclipse Step-by-step guide to changing background color with Eclipse Jan 28, 2024 am 08:28 AM

Teach you step by step how to change the background color in Eclipse, specific code examples are required Eclipse is a very popular integrated development environment (IDE) that is often used to write and debug Java projects. By default, the background color of Eclipse is white, but some users may wish to change the background color to suit their preference or to reduce eye strain. This article will teach you step by step how to change the background color in Eclipse and provide specific code examples. Step 1: Open Eclipse First

Detailed explanation of how to modify the background color of PyCharm Detailed explanation of how to modify the background color of PyCharm Jan 04, 2024 am 11:03 AM

PyCharm is a powerful Python integrated development environment (IDE) that provides developers with many convenient functions and tools. One of the commonly used functions is to modify the background color of PyCharm. In this article, I will introduce in detail the method of modifying the background color of PyCharm and provide specific code examples. To modify the background color of PyCharm, we need to perform the following steps: Step 1: Open PyCharm and click "Settin" under the "File" menu

Eclipse background color configuration guide Eclipse background color configuration guide Jan 28, 2024 am 10:44 AM

Eclipse background color setting tutorial Eclipse is a very popular integrated development environment (IDE) used to develop applications in various programming languages. It has rich features and flexible configuration options that can be customized to suit individual needs. One of the common personalization requirements is to change the background color of Eclipse. This article will show you in detail how to set the background color of Eclipse. We'll provide concrete code examples to help you achieve this quickly. Step 1: Beat

How to remove the background color of word? How to remove the background color of word How to remove the background color of word? How to remove the background color of word Mar 04, 2024 am 10:10 AM

Word is a word document processing tool developed by Microsoft Corporation. It provides rich document editing functions, including text input, table creation, format adjustment, etc. It can easily create and edit various types of documents, such as reports, resumes, and provides richer templates and graphics functions. Because we use Word for office work for a long time, inappropriate background color may cause visual fatigue and even affect the speed of office work, so there is a good way to learn how to remove the background color of Word. How to remove the background color of word? Method to remove the background color of word 1. Open the WORD document that needs to be operated and click the "Page Layout" tab in the toolbar. 2. Find and click "Page Color" and select "No Color". 3.

How to change the window background color in win7 How to change the window background color in win7 Dec 30, 2023 pm 12:31 PM

When we use the win7 system, we can manually set the window background color to get a better visual experience. If we set it to a protective color, it can also protect our eyesight, and the method is very simple. We only need to set it in the personalized advanced appearance settings. It can be set up, let’s learn it together. Win7 window background color setting tutorial 1. First enter the "Personalization" settings 2. Then select the "Window Color" setting 3. Click "Advanced Appearance Settings" below 4. Set the project to "Window" 5. Then click on the right "Color", select the desired color. 6. After the settings are completed and confirmed, you can see that the background color of our window has changed.

Practical tips for quickly updating table row attribute values ​​using jQuery Practical tips for quickly updating table row attribute values ​​using jQuery Feb 25, 2024 pm 02:51 PM

Title: Practical Tips: Use jQuery to quickly modify the attribute values ​​​​of table rows. In web development, we often encounter situations where we need to dynamically modify the attribute values ​​​​of table rows through JavaScript. Using jQuery, you can quickly implement this function while writing concise and efficient code. Some practical tips will be shared below to make it easier to operate and modify the attribute values ​​of table rows in actual projects. 1. Get the attribute value of the table row and use jQuery to modify the attribute of the table row.

See all articles