divの横幅に合わせてcssの切り替えをしたい

Question

【悩み事】
divの横幅に合わせてcssの切り替えをしたいです。
@media screenでウィンドウの幅に合わせてcssを切り替える方法ではなく、

divの幅に合わせてcssのfloatをrightたはinheritで変化できるようにしたいです。

【やりたいこと】
divがPCでみても横幅がスマホサイズになったり、PCに合わせて変更したりするので、ウィンドウの幅ではなくdivの幅で切り替えできるようにしたいです。

【できること】
JavaScriptは初心者で、調べでちょっとの書き換えであればできるのですがこちらが調べても@media screenしかでてこなかったので、質問させていただきました。

<div class="kakunin box">
<p>テキスト</p><img class="kakunin_img right" src="img/item.jpg">
</div>

<style>
.box{display: flow-root;}

img.box_img.right {
float: right;
max-width: 310px;
}

.box p {
    font-size: 21px;
    font-weight: bold;
    padding-top: 70px;
    line-height: 150px;
color: #fff;
    display: inline;
}

@media screen and (max-width: 768px) {
img.box_img.right {
    float: inherit;
    max-width: 260px;
    margin-top: 20px;
    max-width: 100%;
}
</style>

Answer 1

このJSを使うと要素の幅指定でスタイルを記述できるようです。
http://marcj.github.io/css-element-queries/

また、現在ほぼすべてのブラウザで未実装ですが、将来的にはコンテナクエリというもので
親要素の幅が一定値以上以下の場合子要素のスタイルを変更するという記述が可能になるようです。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Comments

[jun116]

ありがとうございます！
こちらのコードを使おうとしたのですが記述する部分がJS記述ができない場所でした、、
それ以外でまた機会がありましたら試してみたいです。
勉強になりました。ありがとうございます！

Answer 2

offsetWidthをみて処理すればいいと思います
boxの幅が変わることで中身がかわると、またboxの幅が変わって
また中身がかわって・・・・という無限ループになりかねないのでは？

Comments

[jun116]

offsetWidthを知らずに調べて適用しようと思いましたが、記述部分がJSが記述するとエラーになってしまう場所でした、、
linkで外部読み込みもできなかったので、また機会がありましたらこちらも試してみます。
勉強になりました、ありがとうございます！