নিম্নলিখিত jQuery ব্যবহার করে কোনও উপাদানটির পটভূমির রঙের আরজিবি মান পাবেন:
$('#selector').css('backgroundColor');
আরজিবির চেয়ে হেক্স মান পাওয়ার কোনও উপায় আছে কি?
নিম্নলিখিত jQuery ব্যবহার করে কোনও উপাদানটির পটভূমির রঙের আরজিবি মান পাবেন:
$('#selector').css('backgroundColor');
আরজিবির চেয়ে হেক্স মান পাওয়ার কোনও উপায় আছে কি?
উত্তর:
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
( উত্স )
rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i)
তবে, দেওয়া রেজেক্সটি jQuery ব্যবহার করার সময় ব্রাউজারের দেওয়া ফর্ম্যাটটি মোকাবেলা করার জন্য ডিজাইন করা হয়েছে, এবং এতে আলাদা সাদা স্থান বা ক্যাপিলাইজেশন ধারাবাহিকতা নেই this আপনি কথা বলছেন আপনি একই রেজেক্স ব্যবহার করতে পারেন এবং কেবল সমস্ত হোয়াইটস্পেসগুলি সরিয়ে আরজিবিতে মিলার আগে ছোট হাতের অক্ষরে রূপান্তর করতে পারেন। পিএস আপনার বেহাল দৃষ্টান্ত উদাহরণ: 'আরজিবি (10, 128,)' আমি মনে করি না যে এটি পরীক্ষা করা যুক্তিসঙ্গত
@ ম্যাট পরামর্শের উপর ভিত্তি করে আমি যে ক্লিনারটি লিখেছিলাম তা এখানে রয়েছে:
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
কিছু ব্রাউজার ইতিমধ্যে হেক্সাডেসিমাল হিসাবে রঙ ফেরত দেয় (ইন্টারনেট এক্সপ্লোরার 8 এবং নীচে হিসাবে)। আপনার যদি এই মামলাগুলি মোকাবেলা করার দরকার হয় তবে কেবল @gfrobenius এর মত ফাংশনের অভ্যন্তরে একটি শর্ত যুক্ত করুন:
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
আপনি যদি jQuery ব্যবহার করছেন এবং আরও সম্পূর্ণ পদ্ধতির চান, আপনি jQuery 1.4.3 সাল থেকে উপলব্ধ সিএসএস হুক ব্যবহার করতে পারেন , যেমনটি আমি এই প্রশ্নের উত্তর দেওয়ার সময় দেখিয়েছি: আমি কি jQuery.css ("ব্যাকগ্রাউন্ড কালার") রিটার্নকে হেক্সাডেসিমাল ফর্ম্যাটে জোর করতে পারি?
document.getElementById("your_id").currentStyle["backgroundColor"]
। ফাংশন rgb2hex()
প্রয়োজন হয় না। এখানে উপরে প্রস্তাবিত সিএসএস হুক ব্যবহার করে এখানে jQuery প্লাগইন দেওয়া হয়েছে, যা ইতিমধ্যে বিভিন্ন ব্রাউজারে রঙ পুনরুদ্ধার করার জন্য সমস্ত বৈধতা রয়েছে: স্ট্যাকওভারফ্লো
$('#selector').css('backgroundColor')
হেক্সে কোনও আরজিবি মান নয়, হেক্সে রূপান্তর করতে বলেছিল । এবং আই 8 এ, $('#selector').css('backgroundColor')
ইতিমধ্যে হেক্স তাই এটি অবশ্যই পরিচালনা করা উচিত। এটাই. আমাকে পাগল করবেন না :)
rgb2hex()
ফাংশনে যুক্ত করেছি, ধন্যবাদ @ এরিকপেট্রু! আমি আইই 7 তে ফিরে কোড করতে হবে এটি বিশ্বাস করুন বা না করুন। সাথে .css('backgroundColor')
এবং নেটিভ obj.style.backgroundColor
আই 7 এবং 8 হেক্স ফিরে আসবে, আরজিবি নয়, তাই আমি rgb2hex()
সরবরাহকৃত উত্তরে ফাংশনটির প্রথম লাইন হিসাবে এটি যুক্ত করেছি যাতে এটি আই 7-তে ফিরে সমস্তভাবে কাজ করে: /* IE7&8 will return hex, so no need to run this function if it is already hex. */
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb.substring(1, 7); //I'm doing a subtring here because I do not want the leading # symbol
আশা করি এটি সহায়তা করে।
বেশিরভাগ ব্রাউজারগুলি ব্যবহার করার সময় আরজিবি মানটি ফেরত দেয় বলে মনে হয়:
$('#selector').css('backgroundColor');
কেবলমাত্র আইই (এখনও পর্যন্ত পরীক্ষিত 6) হেক্স মানটি প্রদান করে।
আইই তে ত্রুটি বার্তা এড়ানোর জন্য, আপনি যদি একটি বিবৃতিতে ফাংশনটি মোড়ানো করতে পারেন:
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
} else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
আরজিবা সামঞ্জস্যের জন্য @ এরিকপেট্রু আপডেট করেছেন:
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
আমি সংজ্ঞায়িত হয়ে থাকলে আলফা মানটির সাথে মিলে মিশ্রিত করতে আপডেট করেছিলাম, তবে এটি ব্যবহার না করে not
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]) /* Add the alpha channel if it exists */ + (rgb[5] !== undefined ? hex(Math.round(rgb[5] * 255)) : '');
এছাড়াও আমি #
এটিকে চূড়ান্ত ব্যবহারের অজগনীয় তৈরি করতে প্রতীকটি সরিয়ে দিচ্ছি (একজন আউটপুট পেতে পারে এবং এটি 0x
উদাহরণস্বরূপ প্রেন্ডেন্ড করতে পারে , বা উপসর্গ ছাড়াই এটি ছেড়ে দিতে পারে)। আশা করি এটি কাউকে সাহায্য করবে!
এখানে একটি ES6 একটি লাইনার যা jQuery ব্যবহার করে না:
var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');
এখানে এমন একটি সংস্করণ রয়েছে যা স্বচ্ছের জন্যও যাচাই করে, আমার এটি প্রয়োজন যেহেতু আমার অবজেক্টটি ফলাফলটিকে স্টাইলের বৈশিষ্ট্যে সন্নিবেশ করানো ছিল, যেখানে হেক্স রঙের স্বচ্ছ সংস্করণটি আসলে "স্বচ্ছ" শব্দটি ..
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
}
else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
return 'transparent';
}
else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
ফাংশন যা হেক্সে কোনও উপাদানের পটভূমি রঙ দেয়।
function getBgColorHex(elem){
var color = elem.css('background-color')
var hex;
if(color.indexOf('#')>-1){
//for IE
hex = color;
} else {
var rgb = color.match(/\d+/g);
hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
}
return hex;
}
ব্যবহারের উদাহরণ:
$('#div1').click(function(){
alert(getBgColorHex($(this));
}
@ জিম এফ উত্তর মত একই উত্তর কিন্তু ES6 সিনট্যাক্স, সুতরাং, কম নির্দেশ:
const rgb2hex = (rgb) => {
if (rgb.search("rgb") === -1) return rgb;
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};
বুটস্ট্র্যাপের রঙ চয়নকারী থেকে নেওয়া রঙের ক্লাস
// Color object
var Color = function(val) {
this.value = {
h: 1,
s: 1,
b: 1,
a: 1
};
this.setColor(val);
};
Color.prototype = {
constructor: Color,
//parse a string to HSB
setColor: function(val){
val = val.toLowerCase();
var that = this;
$.each( CPGlobal.stringParsers, function( i, parser ) {
var match = parser.re.exec( val ),
values = match && parser.parse( match ),
space = parser.space||'rgba';
if ( values ) {
if (space === 'hsla') {
that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
} else {
that.value = CPGlobal.RGBtoHSB.apply(null, values);
}
return false;
}
});
},
setHue: function(h) {
this.value.h = 1- h;
},
setSaturation: function(s) {
this.value.s = s;
},
setLightness: function(b) {
this.value.b = 1- b;
},
setAlpha: function(a) {
this.value.a = parseInt((1 - a)*100, 10)/100;
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R*255),
g: Math.round(G*255),
b: Math.round(B*255),
a: a||this.value.a
};
},
toHex: function(h, s, b, a){
var rgb = this.toRGB(h, s, b, a);
return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
},
toHSL: function(h, s, b, a){
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
var H = h,
L = (2 - s) * b,
S = s * b;
if (L > 0 && L <= 1) {
S /= L;
} else {
S /= 2 - L;
}
L /= 2;
if (S > 1) {
S = 1;
}
return {
h: H,
s: S,
l: L,
a: a||this.value.a
};
}
};
ব্যবহারবিধি
var color = new Color("RGB(0,5,5)");
color.toHex()
আমি এমন একটি ফাংশন তৈরি করেছি যা পঠনযোগ্য বেসিক ফাংশন এবং কোনও রেগ-এক্সপ্রেস ব্যবহার করে।
ফাংশনটি হেক্স, আরজিবি বা আরজিবা সিএসএস ফর্ম্যাটে রঙ গ্রহণ করে এবং হেক্সের উপস্থাপনা প্রদান করে।
সম্পাদনা: আরগবা () ফর্ম্যাটটি পার্সিং সহ একটি বাগ ছিল, স্থির ...
function getHexColor( color ){
//if color is already in hex, just return it...
if( color.indexOf('#') != -1 ) return color;
//leave only "R,G,B" :
color = color
.replace("rgba", "") //must go BEFORE rgb replace
.replace("rgb", "")
.replace("(", "")
.replace(")", "");
color = color.split(","); // get Array["R","G","B"]
// 0) add leading #
// 1) add leading zero, so we get 0XY or 0X
// 2) append leading zero with parsed out int value of R/G/B
// converted to HEX string representation
// 3) slice out 2 last chars (get last 2 chars) =>
// => we get XY from 0XY and 0X stays the same
return "#"
+ ( '0' + parseInt(color[0], 10).toString(16) ).slice(-2)
+ ( '0' + parseInt(color[1], 10).toString(16) ).slice(-2)
+ ( '0' + parseInt(color[2], 10).toString(16) ).slice(-2);
}
.replace("rgba", "") .replace("rgb", "") .replace("(", "") .replace(")", "");
অন্যথায়, আপনি a0,0,0,0 দিয়ে বামে যান। এবং এটি # 000000 ফেরত দেয় যা স্বচ্ছের পরিবর্তে কালো is
চেষ্টা
// c - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
এটিকে কিছুটা সুন্দর লাগছে:
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var r = parseInt(rgb[0], 10);
var g = parseInt(rgb[1], 10);
var b = parseInt(rgb[2], 10);
var hex = '#'+ r.toString(16) + g.toString(16) + b.toString(16);
আরও সুসংহত ওয়ান-লাইনার:
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ Number(rgb[0]).toString(16) + Number(rgb[1]).toString(16) + Number(rgb[2]).toString(16);
jQuery সর্বদা hex ফিরে আসতে বাধ্য:
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle) {
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
}
if (bg.search("rgb") == -1) {
return bg;
} else {
bg = bg.match(/\d+/g);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]);
}
}
}
উপরে উপরে @ জাস্টিনের উত্তর যুক্ত করতে ..
এটা করা উচিত
var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('');
উপরের পার্স ইন ফাংশনগুলি নেতৃস্থানীয় শূন্যগুলি কেটে দেয়, সুতরাং 5 বা 4 বর্ণের বর্ণের ভুল কোড তৈরি হতে পারে ... অর্থাত্ আরজিবি (216, 160, 10) এর জন্য এটি # d8a0a উত্পাদন করে যখন এটি # d8a00a হওয়া উচিত।
ধন্যবাদ
আমি এখানে একটি সমাধান পেয়েছি যা আইপি তে স্ক্রিপ্টিং ত্রুটিগুলি ফেলে না: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
স্টিভেন প্রবিলিনস্কির উত্তর সর্বাধিক জিরোগুলি ফেলেছে, উদাহরণস্বরূপ # ff0000 # ff00 হয়ে যায়।
একটি সমাধান হ'ল একটি শীর্ষস্থানীয় 0 যুক্ত করা এবং শেষ 2 সংখ্যাটি বাদ দেওয়া।
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
যেহেতু প্রশ্নটি জিকিউরি ব্যবহার করছিল তাই ড্যানিয়েল এলিয়টের কোডের ভিত্তিতে এখানে একটি জিকুয়েরি প্লাগইন রয়েছে:
$.fn.cssAsHex = function(colorProp) {
var hexDigits = '0123456789abcdef';
function hex(x) {
return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
};
// Convert RGB color to Hex format
function rgb2hex(rgb) {
var rgbRegex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
};
return rgb2hex(this.css(colorProp));
};
এটি ব্যবহার করুন:
var hexBackgroundColor = $('#myElement').cssAsHex('background-color');
এখানে আমার সমাধানটিও রয়েছে, আর্গুমেন্টের ব্যবহার করেও স্প্রেস কেস সরবরাহ করে এবং সরবরাহ করা স্ট্রিংয়ের অন্যান্য সম্ভাব্য সাদা-স্পেস এবং মূলধনের জন্য পরীক্ষা করে।
var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";
var rgbToHex = (function () {
var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
function pad(num) {
if (num.length === 1) {
num = "0" + num;
}
return num;
}
return function (rgb, uppercase) {
var rxArray = rgb.match(rx),
hex;
if (rxArray !== null) {
hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));
if (uppercase === true) {
hex = hex.toUpperCase();
}
return hex;
}
return;
};
}());
console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));
উপর jsfiddle
Jspਫ਼ফের সাথে গতির তুলনা
আরও উন্নতি হতে পারে স্ট্রিংtrim()
rgb
var rxArray = rgb.trim().match(rx),