Add CSS Class Property through Javascript

Question

I have an HTML page having css class for a control with following definition:

.ms-crm-Inline-Edit select.ms-crm-SelectBox {
border: 1px solid #CCCCCC;
font-size: 12px;
margin: 1px 0 0 1px;
width: 100%;
}

I need to add a new attribute to this class as follows:

height: "120px !important";

This has to be done through Javascript. I can't modify origional class definition that's why I have to add Javascript function which does this job. For that purpose I have written Jscript method but its not working.

function CustomizePicklistHeight ()
{
   document.getElementsByClassName('ms-crm-Inline-Edit select.ms-crm-SelectBox').style.height = '120px !important';
}

I guess, first we have to add height attribute to this class but I dont know how to do that in JScript. Please suggest.

getElementsByClassName not getElementsByClassNames. you should keep only one class in it. — Mr_Green
– Mr_Green, Commented Feb 13, 2014 at 12:44

kunl · Accepted Answer · 2014-02-13 13:05:50Z

2

document.getElementsByClassName returns an array of all items with that class.

Try this:

function CustomizePicklistHeight()
{

// Store elements for each class differently. Just in case :)

var elements1 =  document.getElementsByClassName('ms-crm-Inline-Edit');
var elements2 =  document.getElementsByClassName('ms-crm-SelectBox');

// Since you cant affect the array directly, you use a loop to do the operation on each individual element

for (var i = 0; i < elements1.length; i++)
{
element1[i].style.height = '120px !important';
};

for (var j = 0; j < elements2.length; j++)
{
element1[j].style.height = '120px !important';
};

}

Hope this helps.. :)

answered Feb 13, 2014 at 13:05

kunl

1,1951 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

psx · Accepted Answer · 2014-02-13 12:47:47Z

1

  var matches = document.querySelectorAll(".ms-crm-Inline-Edit, select.ms-crm-SelectBox");
  for(i=0; i<matches.length; i++)
  {
    matches[i].style.height = '120px !important';
  }

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

answered Feb 13, 2014 at 12:47

psx

4,0486 gold badges32 silver badges59 bronze badges

Comments

Quentin · Accepted Answer · 2014-02-13 12:44:00Z

0

ClassName means "class name" (ms-crm-SelectBox) not "Entire selector". (querySelector and querySelectorAll let you use complete selectors though.
Elements means "elements" (plural) not "Element". It returns a NodeList, which you can loop over like an array.

If, on the other hand, you want to the modify the CSS rule-set instead of the styles applied directly to the HTML elements, then you need to look at document.styleSheets instead.

answered Feb 13, 2014 at 12:44

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Paulo Lima · Accepted Answer · 2014-02-13 12:44:54Z

0

you will have to make a loop by setting each item, and if you have not "! important" earlier you do not need it.

answered Feb 13, 2014 at 12:44

Paulo Lima

1,2388 silver badges8 bronze badges

Collectives™ on Stack Overflow

Add CSS Class Property through Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related