JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="main">
    <p id="newsScroll">この部分のIDがウィンドウサイズによって切り替わります。</p>
</div>

CSS

body { background-color: #fff; font: 30px sans-serif; }
#newsScroll {
    background: green;
}
#spNewsScroll {
    background: red;
}

JavaScript

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 650) {
        $("#newsScroll").attr('id', 'spNewsScroll');
    }else {
        $("#spNewsScroll").attr('id', 'newsScroll');
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});