在JavaScript中，我們可以通過操作CSS樣式表來修改元素的樣式，如果我們想要獲取修改后的樣式值，就需要使用不同的方法，以下是一些常見的獲取修改后樣式值的方法：
1、使用style屬性：
- 對(duì)于內(nèi)聯(lián)樣式（在HTML元素中直接定義的樣式），我們可以直接使用元素的style屬性來獲取樣式值。
```javascript
var element = document.getElementById('myElement');
var styleValue = element.style.backgroundColor; // 獲取背景顏色
```
- 這種方法只能獲取到內(nèi)聯(lián)樣式表中的值，對(duì)于外部樣式表（在CSS文件中定義的樣式）或樣式塊（在<style>標(biāo)簽中定義的樣式）中的值，這種方法無法獲取。
2、使用getComputedStyle方法：
getComputedStyle方法可以獲取到元素***終應(yīng)用的樣式值，包括從外部樣式表和樣式塊繼承的值。
```javascript
var element = document.getElementById('myElement');
var styleValue = window.getComputedStyle(element).backgroundColor; // 獲取背景顏色
```
- 這個(gè)方法會(huì)返回一個(gè)CSSStyleDeclaration對(duì)象，我們可以從這個(gè)對(duì)象中獲取樣式的值。
3、使用matchMedia和mediaQueryList：
- 如果樣式的修改與媒體查詢有關(guān)（如響應(yīng)式布局），我們可以使用matchMedia方法來創(chuàng)建一個(gè)mediaQueryList對(duì)象，然后監(jiān)聽這個(gè)列表的變化來獲取樣式的修改。
```javascript
var mq = window.matchMedia("(max-width: 600px)");
mq.onchange = function() {
var styleValue = mq.matches ? "窄屏布局" : "寬屏布局"; // 根據(jù)屏幕寬度改變布局
};
```
- 這種方法適用于根據(jù)設(shè)備或視口狀態(tài)動(dòng)態(tài)改變樣式的情況。
4、使用事件監(jiān)聽：
- 對(duì)于某些樣式的修改，我們可能需要在樣式修改后立即執(zhí)行某些操作，這時(shí)，我們可以使用事件監(jiān)聽來捕獲樣式的變化。
```javascript
var element = document.getElementById('myElement');
element.addEventListener('style-change', function() {
var styleValue = element.style.backgroundColor; // 獲取背景顏色
console.log("樣式已修改！");
});
```
- 需要注意的是，這種方法可能不是所有瀏覽器都支持，且可能受到瀏覽器安全策略的限制。
5、使用第三方庫：
- 有些第三方庫提供了更便捷的方式來獲取和修改樣式值，可以使用jQuery庫來簡(jiǎn)化樣式的操作。
```javascript
var styleValue = $('#myElement').css('backgroundColor'); // 獲取背景顏色
```
- 使用第三方庫可以大大簡(jiǎn)化樣式的操作，但需要注意庫的兼容性和性能問題。
獲取JS修改CSS后的值有多種方法，具體使用哪種方法取決于你的需求和場(chǎng)景，希望這些方法能幫助你更好地理解和操作CSS樣式。
