用样式表中的新样式替换以前的样式值并保存该样式

Question

I'm working on project where we append style of any element using jquery append function and saving that style. It is creating duplicate row for that style with different value. I want to check if some style is exist against this element, class, Id than replace it will new and remove old one. Here is my short code.

<input type="number" onclick="changeHeight(this)">

<script> 
    function changeHeight(ele){
        var het=$(ele).val();
        $('style').append("#its_height{height:"+het+px"}");
    }
</script>

MY output :

<style>
#its_height{color:red}
#its_height{width:40px}
    #its_height{height:30px} #its_height{height:40px} #its_height{height:43px}
</style>

I want that it should be like below this to avoid duplicate enteries and dense data. ** it should remove old heigts like 30px and 40px and only show latest height applied to it. Desired output:

<style>
#its_height{color:red}
#its_height{width:40px}
    #its_height{height:43px}
</style>

Answer 1

Edited Answer: Okay, i see what you are trying to do. Since you are copying the style back to the DB and you already have that covered -- and you simply need to change that portion of the style, use .replace('text to replace', 'new text to use')

So first get the computed style and set it in a var, then use that var within the 'text to find' and use your replacement value var within the 'new text to use'.

    function changeHeight(ele){
        var styleToReplace = $('#its_height').css(height),
        het = $(ele).val();
        $('style').html(text.replace(('#its_height{height:')+($.styleToReplace)+('px;}'), ('#its_height{height:')+($.het)+('px;}')));
    }

I'm not sure what the het var is, but the above should replace the current height value with whatever your het var.

I'm also not sure why you don't have; after your style properties. Shouldn't it be #its_height{height:30px;} with the closing semicolons, or are they not needed here? I included the semicolons in the above examples anyway.

Answer 2

Your last apended height always apply to your element. If you replace all style so you can use.html, but it replace all other attributes also.

Answer 3

Whatever style you want to change you can keep in separate style tag and provide ID to that tag. after then you can change in particular. If you will do with style then it will change whole page CSS.

You can follow following example.

 function changeHeight(ele){ var het=$(ele).val(); $("style#itsHeightCSS").html(`#its_height{height:${het}px}`) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style> #its_height{ background:#000; width:100px; margin-top:10px; } </style> <style id="itsHeightCSS"> #its_height{height:30px} </style> <input type="number" value="30" onclick="changeHeight(this)"> <div id="its_height"></div>

Answer 4

I would suggest you not to use 'append'.

Instead, try this,

Give a class or ID name to the where you can define all your predefined styles for the input tag in the style section.

<input id="its_height" type="number" onclick="changeHeight(this)></input>


<style>
    #its_height{
        color:red; 
        width:40px;
        height: 10px; // default height (not mandatory to mention)
    }
</style>

Now in changeHeight method using.css() jquery method update the height of the input section.

<script>
    function changeHeight(e) {
        var het=$(ele).val();
        var divHeight = $('.col-1').height(); 
        $('#its_height').css('height', het+'px');
    }
</script>

I think this would be helpful for your question. Please let me know if this is working out for your case. We can attain the same solution with the help of vanilla javascript as well. Feel free to post a comment if you are in need of the plain javascript solution.