find javascript code that changes particular css properties
In the Elements panel, right-click the element in question, and in the context menu choose Break on...
> Attributes Modifications
. Next time its style
attribute is changed, the debugger will break on the corresponding JS line.
Can I use javascript to check the style properties on an object which has been styled with a class?
It sounds like you're after getComputedStyle()
.
The
Window.getComputedStyle()
method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.
Getting or changing CSS class property with Javascript using DOM style
As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.
This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...
function changeBGColor() {
var cols = document.getElementsByClassName('col1');
for(i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = 'blue';
}
}
Find javascript that is changing DOM element
Right click on DOM element > Break on > Attributes Modifications
Via #3 in https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know
Event detect when css property changed using Jquery
Note
Mutation events have been deprecated since this post was written, and may not be supported by all browsers. Instead, use a mutation observer.
Yes you can. DOM L2 Events module defines mutation events; one of them - DOMAttrModified is the one you need. Granted, these are not widely implemented, but are supported in at least Gecko and Opera browsers.
Try something along these lines:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';
You can also try utilizing IE's "propertychange" event as a replacement to DOMAttrModified
. It should allow to detect style
changes reliably.
javascript modify css class property while knowing only the class' name
Following your response in the comment, if the element is being generated by Jquery, then the library is most likely installed. Here is something you can try to select it via Jquery and change the require property.
$(document).ready( function(){
$('.my-class-name').css('display', 'block');
});
Substituting 'block' for whatever setting you require.
If Jquery is included it should do what your require on page load. You can also attach it to other events as well.
$(document).ready(function(){
$('.my-class-name').click(classClicked);
})
function classClicked(){
$(this).css('display','block')
}
Related Topics
How to More Accurately Measure Svg Text Height
How to Scroll to Top on Route Change with React Router Dom V6
Document.Createelement('Div') with a Class
How to Make Content Load When the User Scrolls Down to It
Ng If with Angular for String Contains
How Much of an Effect Can Different Operating Systems Have on Displaying Web Pages
Can't Change Bootstrap Tooltip Title
JavaScript Invalidcharactererror When Modifying a CSS Name with a Space
Scrolltop Jquery, Scrolling to Div with Id
Semantic-Ui Modal Size Keeps Extending to the Height of a Page
Calendar Not Showing Up in Bootstrap Datetimepicker
Permanently Change CSS Property with JavaScript/D3Js/Jquery
Expo' Is Not Recognized as an Internal or External Command
Transitioning Affixed Navigation Bar - CSS
How to Prevent iOS Safari Alert When Trying to Open Non-Installed Native App