I am making a chrome extension that changes the colors of websites to reduce eye strain. I have noticed that a lot of websites have tags without IDs or Classes. For instance:
<span>Insert Text Here</span>
In my code I will write
document.body.style.color = #fff;
and it changes most of the text color from black to white but nested elements aren't effected.
How would I make all the text colors white and all the background colors dark?
You'll need some way of identifying the elements. That doesn't mean they have to have IDs or classes, you have the full range of CSS selectors at your disposal for use in a style element you can add to the page from your extension's code. Or you can use those CSS selectors in JavaScript code using querySelector and querySelectorAll and apply additional logic if necessary.
Related
I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.
Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.
I'm writing a source code highlighter, and I'd like to highlight and make clickable a non-standard piece of code area.
For example, I'd like all the colored areas to be separately clickable.
As I understand it, implementing this with CSS is impossible. Though I can dynamically assign equal CSS classes to each span which belongs to same area (and modifying those via class selector). But then I have a problem, that each of those spans must be clickable. So I should also attach JS events to each span.
Overall this sounds like a zillion of spans with zillion of events, am I correct? Is there better solution?
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
I'm working on a browser script that scans a page for keywords, highlights them, and when the user hovers over them - creates a tooltip that gets filled using AJAX and PHP. The only problem I've run into is that the CSS of the website the tooltips are displayed on is interfering with the CSS of the tooltip content.
The tooltip uses an <img>, <p> and <table> with <tr> and <td>. My PHP file echoes these elements back with ID's which I have styled in my CSS file. My CSS displays properly on some sites like Wikipedia, but others mess up the padding/margins/alignment. For example, certain websites may align <td> center, while I would like it aligned left. I have already added "!important" to many of the ID's used.
Question: How do I keep a website's CSS from interfering with the styles of my tooltip?
One thing you could do is to use a id for your tooltip container.
You just need to keep in mind that id have to be unique. So you must not have two tooltips on your page.
<div id="my-tooltip-2986234">
the content of the tooltip
</div>
Then for your css file your create something like this:
#my-tooltip-2986234 * {
/*reset all style properties here (you can take this of a css reset script)*/
}
Because id a have a higher weight then rules without an id this should overwrite all stylings of the foreign page inside of your tooltip container.
You will also need to prefix all your rules for the tooltip with that id.
#my-tooltip-2986234 a {
/*style for your a*/
}
You indeed could still have problems with !important rules of the foreign site. But creating your styling code that way would minimize the conflicts. Your can still think of adding !important rules to your rules. But at least for the things I created prefixing the rules with an id was sufficient.
Another solution - but not as elegant as the one above - is to create an iframe container where you write your content to. That way you would have complete sandboxing of your css rules. But because I didn't use iframe for a long time I don't know right now where the pitfalls in the various browsers are (You need to create an iframe without a src, because of cross domain policies, which used to cause problems in some browsers).
How to change style of Scrollbar in Select Control in HTML?
You cannot set styles to the system elements. They look different in different bowsers and OSs. And you cannot do anything dirctly with them. But you could use some jQuery plugins to replace system elements. check this