I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected. However, once the page finishes loading, I am unable to see the applied CSS styles from the JavaScript file. It seems like there may be some overwriting or removing of CSS styles happening on my end. Can someone guide me on how to achieve this using AngularJS/JavaScript/jQuery? Any help would be greatly appreciated.
Here is my code:
Using AngularJS
angular.element.find('.ctp-textfield')[0].style.width = "75px !important";
angular.element.find('.ctp-textfield')[0]["ng-style"] = "{height: 75px}";
Using JavaScript
document.getElementById('Idname').style.width = "75px !important";
Using jQuery
$('#idname')[0].style.width = "75px !important";
$('#idname').style.width = "75px !important";