javascript - Can one detect if an element's style is just the browser default vs. is set by a stylesheet or inline styles? -
my javascript included in x's site, don't have other control on site or includes it. if she's styled #element, want leave alone, if hasn't, i've got stylesheet i'll inject in <head>. there way detect whether or not she's styled it?
checking it's height 0 or 1 fails because it's got content in , browser makes default decisions.
any way javascript/jquery/other framework tell css specificity of style answer , incredible.
a straightforward imperfect way of knowing if there intent style element check if style attribute of element has value or if class attribute of element has been set.
html
<div id="test_unstyled"></div> <div id="test_styled" style="background-color: red;" class="something"></div> js
var unstyled = document.getelementbyid('test_unstyled'), styled = document.getelementbyid('test_styled'); console.log('test_unstyled styled?', !!(unstyled.getattribute('style') || unstyled.classname)); console.log('test_styled styled?', !!(styled.getattribute('style') || styled.classname)); however, solution not detect styles applied through css selectors. if want take these in account, have find out default styles applied browsers , check against that, hard maintain , don't recommend trying implement approach unless willing develop , maintain library sole purpose.
if publishing plugin others might use, easier implement api allow plugin's client decided wether want plugin styles applied or not.
you include stylesheet , users able override styles loading custom stylesheet.
Comments
Post a Comment