Is there a way for me to get an element's computed style from a page source? Or, if not from the page source, some other way? I want to be able to go to a web page and then get all the computed styles (via my code; I'm not talking about opening a browser tab and clicking Inspect element). Right now I'm using Python BeautifulSoup to get and traverse the document. This gets me all the elements and their attributes, but not the css styles. Ideally this would be with Python, but I'm open to using other languages.
(Sorry, if this has been answered before. I looked at several questions and they all seemed to have to do with getting the info either from "inspect element" or from your own personal page using javascript.)
I'm using PhantomJS. I inject a JavaScript script into the page that runs getComputedStyle.
You can look for CssParsers like the following
http://www.modeltext.com/css/index.html
http://www.codeproject.com/KB/recipes/CSSParser.aspx
Related
I'm trying to learn scraping web content with Scrapy and came across an issue that I'm unable to comprehend. I can't understand why it's happening; I'm able to select a DOM element with any browser's dev tools, but when I try to select the very same element from Scrapy an empty list is returned. Here you can see that this xpath //*[#class='lSPager lSGallery']/li/a/img[#src] works fine in a browser , but returns nothing when it's called from Scrapy:
Moreover Scrapy completely doesn't see the lSPager class which can be easily selected in a browser
OK, I figured it out just right after I wrote the question. The problem was that I had JavaScript enabled in the browser. I disabled JS and DOM structure in the browser became the same as in the Scrapy.
I am new to CSS and just learned how to inspect an element. My question is how can i get a whole/full CSS code for an element?
Let say i need a full css code for a form (https://townends.co.uk) please see search form on homepage, How can i get that whole code for this module?
Thanks in advance.
A
Right click -> View Page Source from site.
Then find "< link rel='stylesheet'" keyword. You have all the css files associated.
Sounds like you could use the dev tools in your browser. They can be super helpful for seeing what actually is affecting different elements in your site. depending on which browser you are using the shortcut for it is different. My favorite suite of in-browser dev tools is in Firefox(check out the developers edition of Firefox as well).
From within the dev tools of Firefox you can click on the arrow pointing into a box from the highest level tabs. This allows you to hover over any element on your page and display the classes and ids affecting the element as well as the rules being used on the element in the dev tool partition of your screen at the bottom. There are many more useful tools in browsers so explore it a little and it will probably improve your productivity.
I'm trying to use an open source HTML5 file uploader snippet in one of my pages, and have put (I believe) all the correct javascript in place.
However, when the page loads I see the 'choose file..' button along with the text box that shows the path to the file on my hard drive, and they're both greyed out.
In looking through the Google and FireFox development tools I can't see why this would be; the CSS involved is quite involved and I can't tell easily whether there's a block display of hidden in there, or whether something else is disabled.
Nothing's jumping out. Are there HTML or CSS inspectors that can help figure out why HTML element X is disabled?
There should be a disabled attribute set. You can try two things:
Check the HTML by viewing the source code. This is the HTML rendered before JavaScript.
Check the Dev Tools and look for a disabled attribute. Then check your JavaScript.
It is hard to debug this remotely but this should send you on your way.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
I would like to implement the application where user can include the different CSS files when clicked on different buttons. Please let me know how this can be achieved. I don't want to use the theme feature.
I am trying to change the CSS but I have noticed the ungly behaviour as follows:
When using mozilla i see the source
code for page i see code for latest
CSS.
But its not getting downloaded/ tried using the tamper data request to download CSS is not getting sent.
When I inspect the elements style is still the old file
Any idea what could be causing this? Please let me know how to get this working. Desperately looking for a solution.
Can this be done nicely using the ScriptManager control ?
To change styles on the client-side, you need to programmably change the reference to the stylesheet, which would work. However, you wouldn't see this changed in the view source... view source isn't a running document, inspecting all the changes made by JavaScript... so that can be a pain.
Firebug is pretty good, but again, even with Firefox/FireBug, IE dev tools, certain things don't get updated, depending on what you are doing.
So did you write some code and you are not seeing the changes directly, or you see the changes but you can't verify them?
HTH.
In this case I would use xmlHttpRequest with GET verb in order to obtain the needed CSS file from a dedicated handler. Pass the name of the style sheet that you need to request as a query string argument. I suggest that you fire the request dynamically, on click of the button who should download the respective CSS file.