We Keep Coding

Search by selector by class name and style property JS

I am trying to return the desired element by its unique properties. To do this, I need to use something like this code. I have a mistake in it, how do I make this entry correct?
document.querySelector('div[class="className" style*="text-decoration:line-through"]')

You need to separate the attribute selectors:
document.querySelector('div[class="className"][style*="text-decoration:line-through"]');
Also note that as you're using a class to target the elements, use a class selector for better performance:
document.querySelector('div.className[style*="text-decoration:line-through"]');
Lastly, your style selector is incredibly brittle, and very easily broken. For example, if someone validly uses text-decoration: line-through then it will not be matched. I would strongly suggest you use a class to apply the style and select the element.

Understanding .removeClass in jQuery

Can some one please explain to me what exactly is this jQuery call doing
$("header").removeClass("alternative full-width").addClass("full-width");
What exactly is it doing to the CSS file, Many Thanks

removeClass() function will remove the css selector applied to the element. In your case, if the header element has css attribute with value "alternative full-width", then those will be removed and it will add "full-width"
I also observe that, the above code has two values and you're trying to remove those two and add one of them.
Instead you could do this -
$("header").removeClass("alternative");
since you wish to add "full-width" which is already available!
NOTE I assume the .full-width css value is constant in that field. If it's not the case, we may have to use hasClass() to determine the existence!
For more info on removeClass - https://api.jquery.com/removeclass/

What exactly is it doing to the CSS file?
It has no effect on the CSS file
Can some one please explain to me what exactly is this jQuery call
doing
it remove the classes ( alternative and full-width )from the header with removeClass() and then it add the class ( full-width ) with addClass()

Header Element
$("header")
Select a header tag via JQuery
.removeClass("alternative full-width")
This method remove the "alternative full-width" class
.addClass("full-width")
This method add the "full-width" class.
As a matter of fact the JQuery it doesn't do anything in the CSS file.The only thing that is done with this example is to inherit the class properties that you have alredy define in the css file

Angular 2 ng-if fails

Trying to apply css styles dynamically for the element which has ng-if condition.
Works fine, if the condition is true. Is there any way that I can modify the element even if the condition fails. I know I can find the element (by getElementsByClassName) and modify but is there any other better solution other than this?
ex:
<span *ngIf="orderBy=='asc'" [ngStyle]="{'height': value+ '%'}"></span>
<span *ngIf="orderBy=='desc'" [ngStyle]="{'height': value+ '%'}"></span>

You can use ngClass for that. Add class based on the conditional value.
[ngClass]="{orderBy=='asc'? 'someclass': 'otherclass'}"
You can write seperate styles for each of the class.

You can use ng-class to achieve this
ng-class="{'classname':orderBy==='asc',
'classname':orderBy==='desc'}"

Manually add ng animate to element

Is it possible to manually add NG animate to an element?
For example I want to add ng-enter and ng-leave when a ng-class is added or removed. But I also need ng-enter-active and ng-leave-active classes that gives me more control over the animation process.

Yes, you can. But you've to do some trick here like following.
Use https://daneden.github.io/animate.css/ for your application. It has nice animations by default. If you add this to your element, whenever the element inserted to the dom, there will be an animation.
But here in your scenario, add animate class whenever you add or remove class from your elements based on your condition. The sample code is below.
<div ng-class="AddClass?'yourClass animated fadeIn':'animated fadeOut removedClass'">
</div>

It is not possible to remove a directive based on a class change in ng-class. However since you are applying a class in ng-class based on a condition, you could use that same expression in ng-if to include ng-enter or ng-leave.

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()