How do I make part of a style element a function? (IE: color:$random instead of color:red)


Tags: javascript,html,css

Problem :

This is probably a really noob question, but I couldn't figure out on my own thus far.. The title pretty much covers it up but I'm looking for how I can change the element some CSS into a function, in this case random.

To rephrase and provide more of a picture for you I want the program I am working on to look like this:

<html>
<body>
<p onClick="document.Color='$randomColor'"> Test sentence. </p>
</body>
</html>

as opposed to what I have now.

<html>
<body>
<p onClick="document.Color='green'"> Test sentence. </p>
</body>
</html>

Can anyone please help me? Many thanks in advance if anyone can!



Solution :

<html>
<head>
<script>
function getRandomColor()
{
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return r.toString(16)+g.toString(16)+b.toString(16);
}
</script>
</head>
<body id="bd">
<p onclick="document.getElementById('bd').style.color='#'+getRandomColor();"> Test sentence. </p>
</body>
</html>

    CSS Howto..

    How to put images behind each other in css

    How to select every 4th div inside another div CSS Selector [closed]

    CSS How to make image size relative to parent?

    how to test css(3) style property value support, repeat value support?

    How to toggle overlay with no body scroll using the same button / div

    how to do jquery once fade out has finished?

    How do you create a transparent overlay with text upon mouse hover?

    How to change this table layout to a css layout?

    How to make IFrame fill width of screen

    Jquery how to change your website background?

    How to remove the gap between each list-item in an unordered list?

    How to override CSS

    how to make slide animation?

    How to create a pricetag shape in CSS and HTML

    How to build a CSS style with a LESS mixin parameter?

    How do you change the modal link color in Foundation?

    jQueryUI Autocomplete: how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

    How to add fade in and fade out when changing between texts in javascript

    How to Show the Related Content in another Div when an Image Clicked

    How to set border's thickness in percentages?

    How can I convert an svg-glyph into a path?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    how to do css styling

    How to look up and combine data in different parts of an XML source document using XSLT to create SVG visualization of a finite element mesh

    How to make a progress bar like this in CSS

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to add a play icon to Image on CSS

    How to show and hide fieldset content on click of the legend

    Using CSS to show gradient as well as an image

    How to mark up a layout blocks with the CSS property “display:flex;”?