3

I want to create a prototype function for adding style to element. Similar to the following code: 

element.css3("property" , "value");

please help me to write prototype function. this is my code : (has problems)

Object.prototype.css3 = function (property , value) {
  this.style.property = value;
};
toastal
  • 1,056
  • 8
  • 16
hamidb80
  • 302
  • 3
  • 16
  • You shouldn't modify builtins, but if you absolutely have to, at least [do it properly please](http://stackoverflow.com/q/13296340/1048572). – Bergi Jan 26 '17 at 06:45

2 Answers2

2

Use bracket notation to set a property using a string variable otherwise which sets a property named property. Where use String#replace method to capitalize character after - symbol, to make valid property in Javascript style.

Element.prototype.css3 = function (property , value) {
  this.style[property.replace(/-([a-z])/gi,function(_,m){ return m.toUpperCase(); })] = value;
  // or this.style[property] = value;
};
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • @hamidreza : because dot notation sets a property named as `property` not the string value passed .... for set using a string , use bracket notation – Pranav C Balan Jan 26 '17 at 05:46
  • can you write a code for delete ' - ' characters and capital next character?for exam: background-color => backgroundColor – hamidb80 Jan 26 '17 at 05:47
  • I knew nothing of this Code . /-([a-z])/gi,function(_,m){ return m.toUpperCase(); } – hamidb80 Jan 26 '17 at 05:56
  • @hamidreza : which is using to replace the character – Pranav C Balan Jan 26 '17 at 05:57
  • I really need to learn more about this notation: `/-([a-z])/`. I have seen it used, but not sure what it is called. – xxSithRagexx Jan 26 '17 at 06:19
  • 1
    @xxSithRagexx : it's regex – Pranav C Balan Jan 26 '17 at 06:20
  • @hamidreza : it's called regex , for matching certain pattern.... in above example which matches - followed by any character – Pranav C Balan Jan 26 '17 at 06:21
  • @hamidreza : the character-class is wrapped using parenthesis ( capturing-group ).... which can be accessed as the second argument in callback... within the callback capitalizing the value and replacing – Pranav C Balan Jan 26 '17 at 06:23
  • Okay, I am up to speed on `regex`, pretty awesome. The use case in this script makes perfect sense now. Only part I am not clear on is your arguments in the function. `m` is clearly the letter after the `-` character, but how was it passed to the function? Thanks for your input on this! – xxSithRagexx Jan 26 '17 at 06:45
  • @xxSithRagexx : rest will do by the `replace` method – Pranav C Balan Jan 26 '17 at 06:46
  • wow!! if i remove method replace for css (writed by :Pranav C Balan) , code works too. for exam elemnt.css3('background-color' , 'red'); really background color be red!!! – hamidb80 Jan 26 '17 at 17:59
  • @hamidreza : yes it will work, camecase is using to work with dot notation – Pranav C Balan Jan 26 '17 at 18:18
  • 1
    @xxSithRagexx : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter – Pranav C Balan Jan 26 '17 at 18:19
  • @PranavCBalan: Thank you! Very helpful. – xxSithRagexx Jan 26 '17 at 20:18
0

One way to achieve what you are trying to do is to write it like this:

Object.prototype.css3 = function (property , value) {
  this.style[property] = value;
};

The way it is written now it will be looking for the [property] named property of [style], which does not exist. With this you will be able to pass a string form of the property to the style and change your value.

xxSithRagexx
  • 193
  • 1
  • 1
  • 13