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

Multiple HTML same id elements if only one is rendered in the DOM

Can you have multiple same id elements if only one is rendered in the dom?
For example in Laravel you can have:
#if (Route::has('login'))
#auth
<h2 id='header'>Dashboard</h2>
#else
<h2 id='header'>Sign up</h2>
#endauth
#endif
I realize multiple id on same elements is bad practice, but technically in a situation like this only one element would be rendered in the DOM, as far as browser is conserned, it only detects one of them, so would it have any bad effects regarding javascript etc..? It can simplify css though.
I don't plan to use this in my projects, just curious.

I would go this way :
#if (Route::has('login'))
<h2 id="header">{{ Auth::check() ? 'Dashboard' : 'Sign up' }}</h2>
#endif

In any case having a class is better even for the css as the ID adds a much bigger weight on the element, for example if you want to override a css property you won't be able to achieve it by just adding a class.
An example for this will be:
#header {
font-size: 1.5rem;
}
later you want to override the css on just one header element and not on the other, adding a class to that element won't override the font-size of the element. I hope I am clear with the example.
So to summarize your code is okay, it will get only one element on the page with the ID when it get's rendered.

If only one "h2" of them will be rendered, it doesn't differ from writing only one of them
due to your code, there's no way the two "h2" will be rendered in the DOM
the only thing will cause a problem if any two elements were rendered in the DOM with the same ID
in that case, if you tried to select one of them or apply any js to them it will select the first element was rendered on the DOM

Change CSS properties directly in Angular 2+

In jQuery, we can do
JQuery('.someStyle')
.css({"background", "red"})
to directly change the CSS property in style.
In Angular 2+, we can use [style.<property>] to manipulate, is there an option to directly manipulate the style sheet?

Angular offer template reference variable like this. Here #textCont is a template variable which can be passed to component and it can be used to add styles
<div #textCont> I wil change color on click<div>
<button type="button" (click)="changeColor(textCont)">Click</button>
In component
changeColor (elem){
elem.style.color="red"
}
DEMO

Even with the jQuery snippet you posted you don't manipulate the stylesheet, only the CSS properties of the object representing the DOM element.
Why would you want to manipulate the stylesheet directly? You would have to modify it before the browser parses it - before it is sent from server to client. This is hardly desirable.
What you are probably looking for is just a way how to change styles of your DOM element dynamically.
There are many ways how to achieve that with Angular ranging from injecting ElementRef (object providing access to component's host element) to your component's constructor or using Renderer2 in order to change the styles directly on the DOM element, to templating (like the [style.<property>] you have mentioned) or even Angular Animations.

Just fixed a small bug from #brk here. In Angular 13+ you may use:
<div #textCont> I wil change color on click</div>
<button type="button" (click)="changeColor(textCont)">Click</button>
And in Component more "strict typing"
changeColor(elem: { style: { color: string } }) {
elem.style.color = 'red';
}

Removing effect of a CSS selector

My requirement is a bit tricky. I have a mark-up as below: (just an example, real mark-up is very complicated)
<div class="classA">
<div class="classB">
<p class="classC">
<span class="classD">
</span>
</p>
</div>
</div>
As you can see above, there are four CSS classes classA, classB, classC, classD associated with the markup.
Also I have used jQuery to bind events using these selectors.
My Requirement: I want the jQuery event binding to work and at the same time, the CSS should not get applied i.e. I want to negate the impact of CSS styles from a UI perspective, but from functional perspective jQuery event handlers should still work.
So, is it possible to override the CSS selectors such that their styles don't get applied to my mark-up elements ?
example below:
div.classA div.classB p.classC span.classD{
color:red;
}
I don't want the font color to be red, so I tried to override the selector as follows, but its not working:
div.classA div.classB p.classC span.classD{
color:red;
}
div.classA div.classB p.classC span.classD{
/*no styles here*/
}
Please help !!

Then just delete those classes from css. jQuery will still work though.
There is no requirement that only classes used in css have to be used in jquery.
For example:
<div class="someUnknownClass"></div>
Even though, there is no someUnknownClass defined in css, $('.someUnknownClass') will still work.

Use another class name for the selector. So you have classA for the css and classX for the selector.
If you don't want the styles applied. Then you could use $('selctor').css(); to over write the styles. Bit hacky!
OR.
Add a class that over-rides the css. Or remove the class that holds the css.
using: $('selctor').addClass('no_styles'); OR $('selctor').removeClass('current_styles');

I don't know any mechanism allowing to do that the way you want it.
the work around i would suggest would be binding your events on anoter css class and doing something like this :
$('.classD').addClass('eventClassD').removeClass('classD');
$('.eventClassD').on('myEvent', function(){...});
like this you will still have events binded to your elements and would get rid of all the css.

You want to do it without modifying the JS? There's no clean way to do that. But try this.
Presumably you will have something that distinguishes this special set of elements to distinguish it from other elements, of which styles' you want to retain. This is difference probably manifests itself in the form of a different parent container. Just copy the set of CSS rules that affect these classes, and prepend this parent CSS selector with the pre-class values.

"Basically, I do not want to touch the js code, and only if something can be done on the css front, then my requirement is achieved."
If that is all you need, then just remove all of the css definitions from the page.
$("link,style").remove()

How to make style of an element dependent on another element's style

I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.

try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4