I'm developing a website and in some pages of this website there are some services coupled with their related prices (I'm using WordPress as CMS).
I would to color in a different manner all the prices and I would to know if exists some开发者_如何转开发 automatic way to do this, for example using Javascript or simply using a specific CSS rule.
The alternative could be insert manually all the prices in an html tag like "<span class='price'>...</span>
" but for me it would me a bad and boring way ;-)
Thanks
Your HTML is actually a mess where things are very difficult to trace back. Each paragraph seems to have its own div - that's a no-no, the p tag exists for a reason. Also, all of these divs have no way to be identified individually, meaning that you can never get to the one you need.
The best way here, honestly, is just to put that span around every price you find.
You could always track down all the strong elements since only they are used next to prices, but it could bug out other uses of strong tags elsewhere (if you ever have any). Since it doesn't seem like CSS has a way to find the parent element, you would have to do this through JS anyway:
var pricedivs = document.getElementsByTagName("strong");
for (var i = 0; i < pricedivs.length; i++) {
pricedivs[i].parentNode.className = "price";
}
And associated CSS:
.price { color: red; }
.price strong { color: black; } /* We only want the text beside the strong tag, so set the style back */
The effect is that all text that is around text with a strong tag will be colored red.
Is there any code you could share so we can see your situation? As long as the prices are separated in any way from the rest, you can make a CSS entry for it.
Also, using JS to format a page isn't recommended and you should not do it unless you really can't find any other way to access the exact part of the page you need.
EDIT: I guess what you could do is search for any numbers in the text using JS, and wrap that span around it. Then the CSS will do the rest. However, this may be expensive if you're not careful where you're searching for the text, and the numbers wouldn't color for anyone who has JS disabled.
I do an example. In this page http://www.3jolieistitutodibellezza.it/corpo-donna/ the prices are in a structure like this:
<div><strong>Polyglyco Pell:</strong> 25,00</div><div>A base di Poli Idrossiacidi e Alfa Idrossiacidi, favorisce l’eliminazione delle cellule morte, agevola il turnover cellulare, dona turgore e levigatezza</div><div>al tessuto. Indicato per pelli spesse, ipercheratosiche, favorisce la riduzione delle smagliature di recente formazione.</div>
Without using JS maybe it's impossible to find the prices and to color them.
Probably the only easy way to color the prices is to add a class attribute to div containers that contain the prices and to apply a simple CSS rule.
What do you think about it ?
精彩评论