We Keep Coding

Styling a div based on the flex wrap property using javaScript

A created a function that renders buttons depending on how many data gotten from database.
I want to use js to set the style the button container differently,
especially setting property of of the button container to flex direction to column when it starts wrapping,
Since the website can have many buttons.
Is there a way to use javascript to check for the flexwrap property of the button container.
I tried this code but it is returning an empty string
Console.log (btnContainer.style.flexWrap)

try running btnContainer.style in the console directly, rather than console.log(). hope it will help you find a solution

This commend check only inline style like <div style="flex-wrap:wrap;"></div>. Now if you console.log(document.querySelector('div').style.flexWrap) you will get string with value "wrap".
The solution your problem is add style this element in html inline as I wrote above or in js like document.querySelector('div').style.flexWrap = wrap

How to access CSS style of a DOM element with pure DOM functions (without jQuery)?

For some reason I can't access HTML element's display style's value.
Here's my JavaScript code:
var el = document.querySelector('#warning');
console.log(el.style.display)
My code returns "" empty string for #warning's displaystyle but it's actually "none".
I've the following HTML:
<div id="warning">
warning warning warning.
</div>
I've the following CSS:
#warning {
display: none;
}
Any ideas?

You are doing everything right for the most part, but what you are running into is a hangup for most people when they try this for the first time.
The style object in javascript is looking for this value to be inside the actual element (inline) and does not look for it in css code directly.
To access the style, the style has to exist in the dom. You could look into Window.getComputedStyle()
I hope this explains why you are reaching this roadblock.

If you know the element is an ID I'd suggest you use the getElementById(); function. Also AFAIK the style method gets inline styles only. I'd suggest using getComputedStyle();.
Code
var myDiv = document.getElementById("myDiv");
alert(getComputedStyle(myDiv).display);
Will output "none".
Example
http://jsfiddle.net/43jLLd5L/
Reading Material
Not directly related to your question but the answer has some good points.

Removing float:none from CSS class

Using Google Chrome Developer Tools I uncheck "float:none;" from the Styles inspector and my DOM element lines up properly. A OK! However, if try to use jQuery to remove the style via $('#div_appointment_time_picker').removeAttr('float'); or $('#div_appointment_time_picker').removeProperty('float'); respectively (removeAttr and removeProperty) neither of which seem to work. So, basically, how can I programmatically "re-create" what occurs in Google Chrome by unchecking the property in the Style inspector (see img below)

You can use .css() to change css attributes:
$('#div_appointment_time_picker').css("float", "none");
or to edit multiple properties you can use:
$('#div_appointment_time_picker').css({"float" : "none", "another-rule": "value"});

Float isn't an attribute or property of the element like width or ID is, it's a style property, so you'd have to use $('#div_appointment_time_picker').css('float','none');

$('#div_appointment_time_picker').css('float', 'you are a wizard harry');

Use jQuery method .css();
It works like .css(property, value) or .css({property: value})
For example, in your case it would be:
$('#div_appointment_time_picker').css('float', 'initial'); // or 'none'
Read more about float: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Find list of all CSS class rules (from multiple stylesheets) and their active properties for the selected element

I need to get all the matched CSS Selectors for a selected element as well as get the properties of each class that are active for that element.
So far I have looked into getMatchedCSSRules and http://www.brothercake.com/site/resources/scripts/cssutilities/
I don't want to use the cssutilities library because it doesn't get updated if anything changes on the page inside the stylesheets through Javascript (it creates its own rules array which needs to be updated again and again after every change that occurs using Javascript in any of the style tags)
Basically, what I need is what getMatchedCSSRules returns in chrome but for each property in each rule, I need an extra property like "active" which tell whether the current property is active or is overridden by some other class.
It needs to work in Webkit and Firefox (I am using a polyfill for Gecko for getMatchedCSSRules)
Return should be like -
CSSRulesAffectingElement = {
rule : {
text:"<css rule's text>,
properties : {
property1:{value:<value>,status:<active,cancelled>}
}
}
}
Example - //when active fontsize is coming from some other rule
colorclass:
{
csstext:'background-color:red;font-size:12px',
properties:
{
Background-color:
{
value:'red',
status:'active'
},
Font-size:
{
value:'12px',
status:'cancelled'
}
}
}

I think it's impossible unless parsing actual CSS files. I was into that and found out that it was what less.js is doing.
You can check their code on git hub, maybe it helps:
https://github.com/less/less.js

After a lot of research and looking into LESS source as well as firebug, I realized that the quickest method was to use the library http://www.brothercake.com/site/resources/scripts/cssutilities/ and tweak its working to suit my needs..
The getCSSRules() method provides with all the css classes (including the inherited ones) and their properties that are affecting the element. It is an expensive method for sure but I was able to place it selectively in my application to fit the bill..

.show().clone() html different than .clone().show()

Sample of what I am talking about: http://jsfiddle.net/bsnxp/1/
If you check the source .show().clone() display is inline-block (what it should be) and .clone().show() is display: block (not what it should be).
jQuery .show documentation (http://api.jquery.com/show/) says "This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially".
Is there a reason that cloning removes from memory what the original CSS display property was? Is there a better way to bypass this than using .show().clone() then .hide()?

.clone without any arguments doesn't copy the element's data - which includes information about what the display was initially.
Use .clone(true) to clone the data as well.
Documentation for .clone() http://api.jquery.com/clone/