I'm using Hpricot to parse an html page, but need to get the computed styles for each element. For example, if I have an h1 Hpricot element and the external CSS for the page has a background-image defined for h1's, how can I find out what the background-image is?
may be Selenium framework can help you?
Related
I am looking to know if there's a way to override the CSS of a Vue component which has been loaded in the browser.
The component is being worked on by a different developer and is being pushed live independently of the parts of the page I'm working on.
I've tried the following:
using the !important tag
trying to increase css specificity
using the :host() & :root() selectors to try and override the component css
However none appear to work and it appears that the component also generates a style="" in the tags so the CSS is embedded at that level within each tag.
Just wondering is there any way of applying CSS in the base HTML file that would override the CSS of the component.
Thanks for any help with this.
What is the CSS selector equivalent of XPath "//a[contains(text(),'Next ยป')]"?
Thanks
You cannot find text with CSS directly, you could set CSS properties via JavaScript based on the internal contents but in the end you would still need to be operating in the definitions of CSS.
I have an iframe, and I want to set the style inside attribute srcdoc using only CSS.
<iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe>
Is it possible to set the style of span inside srcdoc without using inline style but only style sheet?
If not, I can only put the whole html coding inside srcdoc to change the style?
CSS styles of an iframe are independent from main page appearance. And it is not possible to manipulate externally its design.
Relating to srcdoc attribute, I do not understand what you want. About it, MDN says: "This attribute is expected to generally be used together with the sandbox attribute".
You could try to do it with Javascript by changing the attribute. I am not sure if that is a possible solution for you. But if it is, create a function that can dynamically change the attribute to whatever you want. That way you don't have add it statically inline.
I will give you an quick example below.
document.getElementsByTagName("iframe")[0].setAttribute("srcdoc", "demoValue");
And to change the style of the inner span all you have to do is assign it an id. And make a rule in your CSS, this will alow you to manipulate it both in Js and CSS.
If the iframe is not in the same domain you will not be able to modify the content client side. You will have to read the page using PHP and echo it from your domain.
I'm able to force browsers to use inline css ex:style="...." by using styleWithCSS execcommand. That however doesn't work for IE. IE still uses HTML tags rather then inline css. Is there a way to force IE to use inline styling.
Not by using execCommand(), no. You'll need to style the selection contents manually to have that kind of control. My Rangy library's CSS class applier module may be able to help point you in the right direction.
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)