Apply CSS code from Input field to my DOM Object

Question

I have 3 elements in my HTML 1. Input Field or Text area 2. Button 3. Div with 100px width and 100px height

In the Input field/Text Area, I am going to write a simple css class like below

background-color: red;
border: 1px solid black;

On press on the button, I want to add the above styles to the div.

Can anyone help?

Answer 1

You can use jQuery for that:

$( "#button" ).click(function() {
  $( "#div" ).css("background-color","red").css("border","1px solid black");
});

Answer 2

Try this:

function myFunction() {
    document.getElementById('test').style.cssText = 'background-color: red; border: 1px solid black';
}

<div id="test">hello world!</div>
<button type="button" onclick="myFunction()">Click Me!</button>

Answer 3

Try this code

$('.applyStyle').click(function() {
  var style = $(".customStyle").val();
  var csstxt = $('#applyStyles').attr('style',style );
});

#applyStyles{
width:100%;
height:200px;
display:block;
background-color:#f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="style" class="customStyle" />
<button type="button" name="apply" class="applyStyle">Add</button>
<div id="applyStyles">hello</div>